武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：Firefox下margin-top問(wèn)題.

 很早之前就有發(fā)現(xiàn)這個(gè)問(wèn)題，也慢慢的摸索出了一些避免這個(gè)問(wèn)題的規(guī)律，但是因?yàn)楸容^懶，遲遲沒(méi)有細(xì)究原因，今天再次遇到，忍無(wú)可忍...一探究竟。

   長(zhǎng)出現(xiàn)兩種情況

  （一）margin-top失效  
   先看下面代碼：

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

  兩個(gè)層box1和box2，box1具有浮動(dòng)屬性，box2沒(méi)有，這時(shí)候設(shè)置box2的上邊距 margin-top沒(méi)有效果。

 網(wǎng)上能找到的兩種比較靠譜的解釋：1：“在css2.1中，水平的margin不會(huì)被折疊；垂直margin可能在一些盒模型中被折疊…”2：當(dāng)?shù)谝粋€(gè)層浮動(dòng)，而第二個(gè)沒(méi)浮動(dòng)層的margin會(huì)被壓縮，詳見(jiàn)--浮動(dòng)元素后非浮動(dòng)元素的margin的處理（地址）。

得到解決問(wèn)題思路：要浮動(dòng)一起浮動(dòng)，要就一起不浮動(dòng)。

解決辦法：

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

  （二）子元素設(shè)置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>

當(dāng)給box2設(shè)置margin-top時(shí)，在FF下僅作用于父容器。

解決辦法：

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

自己工作中遇到的總結(jié)，可能會(huì)有不嚴(yán)謹(jǐn)?shù)牡胤剑缬邪l(fā)現(xiàn)希望指出！