在IE6,7中遇到未知的問題無法解決時是否可以嘗試觸發(fā)其layout

這篇文章給大家介紹在IE6,7中遇到未知的問題無法解決時是否可以嘗試觸發(fā)其layout，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

在IE6,7中如果發(fā)現(xiàn)某個異常不知道如何解決的時候可以嘗試著觸發(fā)其haslayout：

鄙人不才，今天也遇到了一個bug嘗試了很多方法，最終在整個父類加上一個height:1%，然后順利解決。

代碼如下:

height:1%
position: absolute
float: left | right
display: inline-block
width: !auto - 除auto以外的值
height: !auto - 除auto以外的值
zoom: !normal - 除normal以外的值
writing-mode: tb-rl
overflow: hidden | scroll | auto - IE7有效
position: fixed - IE7有效
min-width: * - IE7有效，任何值
min-height: * -IE7有效，任何值
max-width: !none - IE7有效，除none外任何值
max-height: !none - IE7有效，除none外任何值

對于內(nèi)聯(lián)元素(默認(rèn)即為內(nèi)聯(lián)的元素，如 span，或 display:inline; 的元素)，

而對于 IE6，如果瀏覽器運(yùn)行于標(biāo)準(zhǔn)兼容模式下，內(nèi)聯(lián)元素會忽略 width 或 height 屬性，所以設(shè)置 width 或 height 不能在此種情況下令該元素具有 layout。
zoom 總是可以觸發(fā) hasLayout，但是在 IE5.0 中不支持。

具有“l(fā)ayout” 的元素如果同時 display: inline ，那么它的行為就和標(biāo)準(zhǔn)中所說的 inline-block 很類似了：在段落中和普通文字一樣在水平方向和連續(xù)排列，受 vertical-align 影響，并且大小可以根據(jù)內(nèi)容自適應(yīng)調(diào)整。這也可以解釋為什么單單在 IE/Win 中內(nèi)聯(lián)元素可以包含塊級元素而少出問題，因?yàn)樵趧e的瀏覽器中 display: inline 就是內(nèi)聯(lián)，不像 IE 一旦內(nèi)聯(lián)元素?fù)碛?layout 還會變成 inline-block。

haslayout 問題的調(diào)試與解決

當(dāng)網(wǎng)頁在 IE 中有異常表現(xiàn)時，可以嘗試激發(fā) haslayout 來看看是不是問題所在。常用的方法是給某元素 css 設(shè)定 zoom:1 。使用 zoom:1 是因?yàn)榇蠖鄶?shù)情況下，它能在不影響現(xiàn)有環(huán)境的條件下激發(fā)元素的 haslayout。而一旦問題消失，那基本上就可以判斷是 haslayout 的原因。然后就可以通過設(shè)定相應(yīng)的 css 屬性來對這個問題進(jìn)行修正了。建議首先要考慮的是設(shè)定元素的 width/height 屬性，其次再考慮其他屬性。

對 IE6 及更早版本來說，常用的方法被稱為霍莉破解(Holly hack)，即設(shè)定這個元素的高度為 1% (height:1%;)。需要注意的是，當(dāng)這個元素的 overflow 屬性被設(shè)置為 visible 時，這個方法就失效了?；蛘呤褂?IE 的條件注釋。

對 IE7 來說，最好的方法時設(shè)置元素的最小高度為 0 (min-height:0;)。

haslayout 問題引起的常見 bug
IE6 及更低版本的雙空白邊浮動 bug

bug 修復(fù): display:inline;
IE5-6/win 的 3 像素偏移 bug

bug 修復(fù): _height:1%;
E6 的躲躲貓(peek-a-boo) bug

bug 修復(fù): _height:1%;

關(guān)于在IE6,7中遇到未知的問題無法解決時是否可以嘗試觸發(fā)其layout就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。