什么是hasLayout？
hasLayout是IE特有的一個(gè)屬性。很多的ie下的cssbug都與其息息相關(guān)。在ie中，一個(gè)元素要么自己對自身的內容進(jìn)行計算大小和組織，要么依賴(lài)于父元素來(lái)計算尺寸和組織內容。當一個(gè)元素的hasLayout屬性值為true時(shí)，它負責對自己和可能的子孫元素進(jìn)行尺寸計算和定位。雖然這意味著(zhù)這個(gè)元素需要花更多的代價(jià)來(lái)維護自身和里面的內容，而不是依賴(lài)于祖先元素來(lái)完成這些工作。
下列元素默認 hasLayout=true ：
<table> <td> <body> <img> <hr><input> <select> <textarea> <button><iframe> <embed> <object> <applet><marquee>
很多情況下，我們把 hasLayout的狀態(tài)改成true 就可以解決很大部分ie下顯示的bug。
hasLayout屬性不能直接設定，你只能通過(guò)設定一些特定的css屬性來(lái)觸發(fā)并改變 hasLayout 狀態(tài)。下面列出可以觸發(fā)hasLayout的一些CSS屬性值。
-------------------------------------
display
啟動(dòng)haslayout的值:inline-block
取消hasLayout的值:其他值
--------------------------------------
width/height
啟動(dòng)hasLayout的值：除了auto以外的值
取消hasLayout的值：auto
---------------------------------------
position
啟動(dòng)hasLayout的值：absolute
取消hasLayout的值：static
----------------------------------------
float
啟動(dòng)hasLayout的值：left或right
取消hasLayout的值：none
---------------------------------------
zoom
啟動(dòng)hasLayout的值：有值
取消hasLayout的值：narmal或者空值
（zoom是微軟IE專(zhuān)有屬性，可以觸發(fā)hasLayout但不會(huì )影響頁(yè)面的顯示效果。zoom: 1常用來(lái)除錯，不過(guò) ie 5 對這個(gè)屬性不支持。）
----------------------------------------
writing-mode: tb-rl
這也是微軟專(zhuān)有的屬性。
ie7還有一些額外的屬性可以觸發(fā)該屬性（不完全列表）：
min-height: (任何值)max-height: (任何值除了none)min-width: (任何值)max-width:(任何值除了none)overflow: (任何值除了visible)overflow-x: (任何值除了visible)overflow-y:(任何值除了visible)5position: fixed
因元素hasLayout而導致的問(wèn)題其實(shí)一般都很容易發(fā)現：往往是內容出現錯位甚至完全不可見(jiàn)。舉一個(gè)典型例子，當一個(gè)元素內含浮動(dòng)或絕對定位的內容時(shí)，它通常會(huì )表現出奇怪和錯誤的行為，看下面的代碼：
<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;}
可見(jiàn)無(wú)浮動(dòng)的div并沒(méi)有被里面的浮動(dòng)元素的高度撐開(kāi)，其高度并不會(huì )自動(dòng)計算。我們下面再給這個(gè)無(wú)浮動(dòng)的div加上個(gè)zoom:1;來(lái)觸發(fā)其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瀏覽器窗口，如下圖：
可見(jiàn)這次外圍容器的高度被撐起來(lái)了。 同樣，設定上文所述的其他會(huì )觸發(fā)hasLayout的css屬性都會(huì )得到這個(gè)結果。通常firefox等標準的遵守瀏覽器可以加上overflow: hidden;來(lái)解決，而IE則不行，需要觸發(fā)其hasLayout屬性才可以。
hasLayout對于內聯(lián)元素也可以有效果，當內聯(lián)元素的hasLayout為true的時(shí)候，可以給這個(gè)內聯(lián)元素設定高度和寬度并得到期望的效果。如下例：
代碼：
<p>今天的<span style="width: 100px; height: 50px; background: #DDD;">天氣</span>真好</p>
效果如下圖所示：
下面給span加上zoom: 1;來(lái)觸發(fā)hasLayout：
<p>今天的<span style="width: 100px; height: 50px; background: #DDD; zoom: 1;">天氣</span>真好</p>
這回的效果如下圖所示：
要注意的是，hasLayout是微軟專(zhuān)有的東西，對firefox等比較遵守標準的瀏覽器就無(wú)效了，因此不可太過(guò)依賴(lài)。貌似現在的IE8就已經(jīng)不用特意去觸發(fā)hasLayout就可以得到和firefox一致的效果，不知ie8是否已經(jīng)棄用這個(gè)屬性了？
其實(shí)依據合理的語(yǔ)義化，恰當的文檔流，正確的標準化所生產(chǎn)出來(lái)的頁(yè)面，在各個(gè)公司出品的標準渲染的瀏覽器下，一般并不會(huì )存在太多兼容性的問(wèn)題的。
一般如果是因為layout而引起的顯示不符期望效果的話(huà)，在ff下會(huì )表現正常，而在ie下會(huì )出現錯誤。這個(gè)時(shí)候可以嘗試觸發(fā)父容器及其中的子容器的 haslayout屬性，通?？梢酝ㄟ^(guò)加上zoom:1;來(lái)調試。直到找到了產(chǎn)生問(wèn)題的元素，再進(jìn)行針對性的修正。最好的辦法是對這個(gè)元素設置尺寸屬性。但是，有時(shí)不便指定尺寸屬性的情況下，就只能尋找替代方案了。對于ie7，最好的辦法是設置最小高度屬性為0；這個(gè)技術(shù)是無(wú)害的，因為0本來(lái)就是這個(gè)屬性的初始值。而且沒(méi)有必要對其他瀏覽器隱藏這個(gè)屬性。而對于ie6和更早版本中觸發(fā)一個(gè)元素hasLayout的方法是在overflow屬性是visible的情況下設置這個(gè)元素的高度屬性為1%，然后對其他瀏覽器隱藏這個(gè)設置。這種技術(shù)就是著(zhù)名的Holly hack。
聯(lián)系客服
