IE6IE7瀏覽器下margin無效的解決方法介紹

只能設置父元素的padding-top;來達到效果 ??聪旅娴难菔敬a;
今天有時間,所以特意做了一個測試 。
代碼如下:
test-2

IE6IE7瀏覽器下margin無效的解決方法介紹

IE6IE7瀏覽器下margin無效的解決方法介紹

呵呵,我標題沒錯吧 。果然IE6,IE7的margin:10px; 失效了 。
解決辦法
【IE6IE7瀏覽器下margin無效的解決方法介紹】代碼如下:
.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 瀏覽器何時退出舞臺 。


相關經驗推薦