CSS教程:Firefox浏覽器下margin-top問題

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

編輯：CSS進階教程

網頁制作Poluoluo文章簡介：Firefox下margin-top問題.

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

   長出現兩種情況

  （一）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沒有效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.Poluoluo.com</title> <style type="text/css">  </style> </head> <body> <div> <div class="box1" >float:left</div> <div class="box2">clear:both; margin-top:20px;</div> </div> </body> </html>
[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下僅作用於父容器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.Poluoluo.com.com</title> <style type="text/css">  </style> </head> <body> <div class="box" style="height:100px;background:red;"> <div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

解決辦法：

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

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

上一頁:網頁制作理論:精確還原設計稿
下一頁:CSS教程:li標記在IE下產生間距

CSS進階教程

XHTML+CSS兼容性解決方案小集: 使用XHTML+CSS構架好處不少，但也確實存在一些問題，不論是因為使用不熟練還是
CSS布局中自適應高度的解決方法: 　　這是div+css布局中經常會碰到的基礎問題，個人覺得采用背景圖填充的方法，還是比較簡單和切實
div中class與id的區別及應用: class是設置標簽的類。 id是設置標簽的標識。 class屬性用於指定元素屬於何種樣式

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

網頁開頭部分的聲明DOCTYPE CSS網頁設計教程:z-index屬性使用方法 3G時代移動WEB設計資料WAP 5個使用CSS3實現的常見效果 CSS教程:網頁圖片垂直居中實例<span></span>方法 CSS產生的特殊效果 Div CSS實例教程：頁面制作方法搜索引擎的蜘蛛人（ROBOTS）秘密網頁CSS優化使網頁具有語義化 W3C標准以及XHTML和HTML

DIV CSS 佈局教程網

相關文章