close
文章出處
margin 失效，樓主開玩笑的吧！
前幾天做一個頁面的時候遇到了這個問題。我設置div的margin-top IE6下居然無效；后來搞了好半天沒弄出來。
只能設置父元素的padding-top;來達到效果。看下面的演示代碼；
今天有時間，所以特意做了一個測試。
<style type="text/css">
.test-1,.test-2{border:5px solid #F00;}
.test-1{border-color:#000;}/*width:100%; height:auto !important;height:1%; zoom:1;*/
.test-2{margin:10px;height:50px;width:500px;}
</style>
<div class="test-1">
<div class="test-2">
test-2
</div>
</div>
呵呵，我標題沒錯吧。果然IE6,IE7的margin:10px; 失效了。
解決辦法
.test-1{border-color:#000;width:100%; height:auto !important;height:1%; zoom:1;}
使用：width:100%;或者 height:auto !important;height:1%; 或者zoom:1; 都可以解決上面的問題。（3選1，不要全部寫進去。）
根據自己的具體情況來選擇一種即可！
問題根源
當然知道了解決辦法還不夠，我們必須知道什么情況會引發上面的BUG，zoom:1;這東西貌似經常使用。于是我去查詢了一下關于zoom的一些信息。
發現他會觸發IE的 haslayout ; haslayout來解決一些常見的IE BUG；（建議不太明白 haslayout 的同學點擊連接去讀一下。haslayout 不神秘。）
在InternetExplorer中，一個元素要么自己對自身的內容進行計算大小和組織，要么依賴于父元素來計算尺寸和組織內容
上面這句加粗的話很重要哦。
上面的例子 test-1 沒有觸發 haslayout 他不能負責對自己和可能的子孫元素進行尺寸計算和定位；所以子元素的margin失效。
當然 激活 haslayout 的方式很多 zoom:1; 其實設置 widht height 也可以激活。所以當設置了 這兩個值。子元素定位也正確了。
以上僅個人根據網上的資料得到的結論，如果有錯誤，還請高人指點。
罪惡的IE 瀏覽器何時退出舞臺。
 |
不含病毒。www.avast.com |
全站熱搜
留言列表
