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

2024-07-11 08:27:46

字體：大中小

來源：轉載

供稿：網友

在IE6,7中如果發現某個異常不知道如何解決的時候可以嘗試著觸發其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外任何值

對于內聯元素(默認即為內聯的元素，如 span，或 display:inline; 的元素)，

而對于 IE6，如果瀏覽器運行于標準兼容模式下，內聯元素會忽略 width 或 height 屬性，所以設置 width 或 height 不能在此種情況下令該元素具有 layout。
zoom 總是可以觸發 hasLayout，但是在 IE5.0 中不支持。

具有“layout” 的元素如果同時 display: inline ，那么它的行為就和標準中所說的 inline-block 很類似了：在段落中和普通文字一樣在水平方向和連續排列，受 vertical-align 影響，并且大小可以根據內容自適應調整。這也可以解釋為什么單單在 IE/Win 中內聯元素可以包含塊級元素而少出問題，因為在別的瀏覽器中 display: inline 就是內聯，不像 IE 一旦內聯元素擁有 layout 還會變成 inline-block。

haslayout 問題的調試與解決

當網頁在 IE 中有異常表現時，可以嘗試激發 haslayout 來看看是不是問題所在。常用的方法是給某元素 css 設定 zoom:1 。使用 zoom:1 是因為大多數情況下，它能在不影響現有環境的條件下激發元素的 haslayout。而一旦問題消失，那基本上就可以判斷是 haslayout 的原因。然后就可以通過設定相應的 css 屬性來對這個問題進行修正了。建議首先要考慮的是設定元素的 width/height 屬性，其次再考慮其他屬性。

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

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

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

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

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

bug 修復: _height:1%;

上一篇：利用margin屬性將一個div水平居中

下一篇：css設置div附帶下拉條的方法