DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> Firefox浏覽器下margin-top問題
Firefox浏覽器下margin-top問題
編輯:CSS詳解     

 很早之前就有發現這個問題,也慢慢的摸索出了一些避免這個問題的規律,但是因為比較懶,遲遲沒有細究原因,今天再次遇到,忍無可忍...一探究竟。



   長出現兩種情況

  (一)margin-top失效   
   先看下面代碼:

<div>
<div class="box1" >float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
</div>

  兩個層box1和box2,box1具有浮動屬性,box2沒有,這時候設置box2的上邊距 margin-top沒有效果。


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

 網上能找到的兩種比較靠譜的解釋:1:“在CSS2.1中,水平的margin不會被折疊;垂直margin可能在一些盒模型中被折疊…”2:當第一個層浮動,而第二個沒浮動層的margin會被壓縮,詳見--浮動元素後非浮動元素的margin的處理(地址)。

得到解決問題思路:要浮動一起浮動,要就一起不浮動。

解決辦法:

1.box2增加float屬性
2.box1與box2之間增加一層"<div style="clear:both;"></div>"

  (二)子元素設置margin-top作用於父容器

<div class="box" style="height:100px;background:red;">
  <div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>

當給box2設置margin-top時,在FF下僅作用於父容器。


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

解決辦法:

1.給父容器box加overflow:hidden;屬性
2.父容器box加border除none以外的屬性
3.用父容器box的padding-top代替margin-top

自己工作中遇到的總結,可能會有不嚴謹的地方,如有發現希望指出!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved