認識hasLayout——IE瀏覽器css bug的一大罪惡根源

時間 2019-11-09

原文原文鏈接

什麼是hasLayout？hasLayout 是IE特有的一個屬性。不少的ie下的css bug都與其息息相關。在ie中，一個元素要麼本身對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的 hasLayout屬性值爲true時，它負責對本身和可能的子孫元素進行尺寸計算和定位。雖然這意味着這個元素須要花更多的代價來維護自身和裏面的內容，而不是依賴於祖先元素來完成這些工做。
下列元素默認 hasLayout=true
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>
不少狀況下，咱們把 hasLayout的狀態改爲true 就能夠解決很大部分ie下顯示的bug。
hasLayout屬性不能直接設定，你只能經過設定一些特定的css屬性來觸發並改變 hasLayout 狀態。下面列出能夠觸發hasLayout的一些CSS屬性值。
-------------------------------------
display
啓動haslayout的值:inline-block
取消hasLayout的值:其餘值
--------------------------------------
width/height
啓動hasLayout的值：除了auto之外的值
取消hasLayout的值：auto
---------------------------------------
position
啓動hasLayout的值：absolute
取消hasLayout的值：static
----------------------------------------
float
啓動hasLayout的值：left或right
取消hasLayout的值：none
---------------------------------------
zoom
啓動hasLayout的值：有值
取消hasLayout的值：narmal或者空值
（zoom是微軟IE專有屬性，能夠觸發hasLayout但不會影響頁面的顯示效果。zoom: 1經常使用來除錯，不過 ie 5 對這個屬性不支持。）
----------------------------------------
writing-mode: tb-rl
這也是微軟專有的屬性。
ie7還有一些額外的屬性能夠觸發該屬性（不徹底列表）：
min-height: (任何值)
max-height: (任何值除了none)
min-width: (任何值)
max-width: (任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)5
position: fixed
因元素hasLayout而致使的問題其實通常都很容易發現：每每是內容出現錯位甚至徹底不可見。舉一個典型例子，當一個元素內含浮動或絕對定位的內容時，它一般會表現出奇怪和錯誤的行爲，看下面的代碼：

<div id="nofloatbox">
<div id="floatbox"></div>
</div>

CSS代碼以下：

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
}
#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}

ie顯示結果以下圖：

認識hasLayout——IE瀏覽器css bug的一大罪惡根源 - neverned - neverned

可見無浮動的div並無被裏面的浮動元素的高度撐開，其高度並不會自動計算。咱們下面再給這個無浮動的div加上個zoom:1;來觸發其hasLayout屬性試試，css代碼以下：

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
zoom:1;
}
#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}

保存刷新ie瀏覽器窗口，以下圖：

可見此次外圍容器的高度被撐起來了。
一樣，設定上文所述的其餘會觸發hasLayout的css屬性都會獲得這個結果。
一般firefox等標準的遵照瀏覽器能夠加上overflow: hidden;來解決，而IE則不行，須要觸發其hasLayout屬性才能夠。
hasLayout對於內聯元素也能夠有效果，當內聯元素的hasLayout爲true的時候，能夠給這個內聯元素設定高度和寬度並獲得指望的效果。以下例：
代碼：

<p>今天的<span style="width: 100px; height: 50px; background: #DDD;">天氣</span>真好</p>

效果以下圖所示： css

下面給span加上zoom: 1;來觸發hasLayout：

<p>今天的<span style="width: 100px; height: 50px; background: #DDD; zoom: 1;">天氣</span>真好</p>

這回的效果以下圖所示：瀏覽器

要注意的是，hasLayout是微軟專有的東西，對firefox等比較遵照標準的瀏覽器就無效了，所以不可太過依賴。貌似如今的IE8就已經不用特地去觸發hasLayout就能夠獲得和firefox一致的效果，不知ie8是否已經棄用這個屬性了？
其實依據合理的語義化，恰當的文檔流，正確的標準化所生產出來的頁面，在各個公司出品的標準渲染的瀏覽器下，通常並不會存在太多兼容性的問題的。
一般若是是由於layout而引發的顯示不符指望效果的話，在ff下會表現正常，而在ie下會出現錯誤。這個時候能夠嘗試觸發父容器及其中的子容器的 haslayout屬性，一般能夠經過加上zoom: 1;來調試。直到找到了產生問題的元素，再進行鍼對性的修正。最好的辦法是對這個元素設置尺寸屬性。可是，有時不便指定尺寸屬性的狀況下，就只能尋找替代方案了。對於ie7 ，最好的辦法是設置最小高度屬性爲0；這個技術是無害的，由於0原本就是這個屬性的初始值。並且沒有必要對其餘瀏覽器隱藏這個屬性。而對於ie6和更早版本中觸發一個元素hasLayout的方法是在overflow屬性是visible的狀況下設置這個元素的高度屬性爲1%，而後對其餘瀏覽器隱藏這個設置。這種技術就是著名的Holly hack。 app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。