margin相容性問題

2022-10-09 22:00:26 字數 1345 閱讀 4754

html:

div>

div>

css:

* .box1

.box2

有兩個元素box1和box2, box1元素設定margin-bottom, box2元素margin-top, 此時上下margin會重疊; 誰的取值大以誰為準

1.只給其中乙個元素設定margin值

給其中乙個元素新增父元素,並且給父元素新增overflow:hidden;(bfc(塊級格式化上下文) 布局)

給子元素設定的margin-top值,會作用到父元素的身上,這種想象稱之為margin-top的穿透問題

1.給父元素新增border

弊端:需要進行盒模型計算,此操作會使父元素寬高各增加2px

2.給父元素新增overflow:hidden

弊端:使用定位時超出盒子的元素,溢位會被隱藏

3.使用父元素的padding-top代替子元素margin-top

piczoom相容性問題 相容性問題

1.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff 下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案 給文字設定 line height 確保所有文字都有預設的 lin...

相容性問題

原文 1.ie浮動 margin 產生的雙倍距離 box 2.display inline block ie6,7下不相容 用float left 3.position fixed ie6不支援 ie6下用position和js模擬,或者完全不用,用position和js模擬 4.cursor ha...

相容性問題

ie6下最小高度為19px,增加font size 0後可縮小為2px 還是沒解決嘛 orz。增加overflow hidden屬性,截掉多餘的高度!ie6 ie7只支援標籤的四個偽類 lvha 不支援其他偽類。ie6,7下父級有寬度就可以不用清浮動,其他瀏覽器不可以哦 haslayout屬性 在i...