【hasLayout觸發方式】和【hasLayout——IE中css bug的罪魁禍首】（轉自：http://hi.baidu.com/oxid/blog/item/8481e6a28128b3a0c

【hasLayout觸發方式】   IE中的HTML元素要實現透明，則其必須具備layout，這樣的元素有僅可讀的屬性hasLayout，且其值為true。具體情況如下： body、img、table、tr、th、td等元素的hasLayout一直為true。 type為text、button、file或select的input的hasLayout一直為true。 設定{position:absolute}的元素的hasLayout為true 設定{float:left|right}的元素的hasLayout為true 設定{display:inline-block}的元素的hasLayout為true 設定{height:xx}或{width:xx}的元素必須具體以下兩個條件之一，其hasLayout才能為true： IE8相容模式和IE8以前的瀏覽器中，在標準(strict)模式下其display的值是block，如demo3就不行。 元素在怪癖模式（compat mode）下。 設定了{zoom:xx}的元素在IE8的相容模式或IE8之前的瀏覽器中其hasLayout為true，但在IE8的標準模式下則不會觸發hasLayout。 設定了{writing-mode:tb-rl}的元素的hasLayout為true。 元素的contentEditable的屬性值為true。 在IE8標準模式下設定了{display:block}的元素的hasLayout一直為true，如demo8。 關於hasLayout的更多詳情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout http://dancewithnet.com/2009/09/06/css-opacity/ http://striblog.com/?p=13 http://hi.baidu.com/lijing00333/blog/item/bbfdd21424f5535bf2de3267.html【hasLayout——IE中css bug的罪魁禍首】 什麼是hasLayout？ 要想更好的理解css，尤其是 IE 下對 css 的渲染，haslayout 是一個非常有必要徹底弄清楚的概念。大多IE下的顯示錯誤，就是源於 haslayout。 haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎採用了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個布局（layout）。 通過 IE Developer Toolbar 可以查看 IE 下 HTML元素是否擁有haslayout，在 IE Developer Toolbar 下，擁有 haslayout的元素，通常顯示為“haslayout = -1”。 什麼情況下hasLayout不會出現？ 一般情況都不會出現，當然除了下面羅列的預設具有hasLayout的元素和使用特定樣式觸發以外； 它會帶來各種詭異表現，當你發現IE7-出現了一些不可思議的問題，首先要檢查的就是是否是hasLayout在搗鬼； hasLayout只出現在IE7及更早版本中，IE8不存在hasLayout解析模式，我們只討論指定doctype的情況。 hasLayout的觸發條件： * position: absolute(IE5+) * float: left|right(IE5+) * display: inline-block(IE5+) * width: “auto”以外的任何值(IE5+; 對inline元素無效) * height: “auto”以外的任何值(IE5+; 對inline元素無效) * zoom: “normal”以外的任何值(IE5.5+; IE私人屬性) * writing-mode: tb-rl(IE5+; IE私人屬性) * overflow: hidden|scroll|auto(IE7; 此屬性在IE6及更早版本中不能應用在未觸發hasLayout的元素上) * overflow-x|-y: hidden|scroll|auto(IE7; 此屬性在IE6及更早版本中不觸發hasLayout; 此屬性在CSS3中才獲支援) * min-width: 任何值(IE7; 即使是0) * max-width: “none”以外的任何值(IE7) * min-height: 任何值(IE7) * max-height: “none”以外的任何值 (IE7) * position: fixed(IE7) 清除或重設hasLayout： * position: static(IE5+) * float: none(IE5+) * display: “inline-block”以外的任何值(IE5+) * width|height: “auto”(IE5+; 對inline元素無效) * zoom: “normal”(IE5.5+; IE私人屬性) * writing-mode: 從’tb-rl’到’lr-tb’(IE5+; IE私人屬性) * max-width|max-height: “none”(IE7) * overflow: visible(IE7) haslayout 問題的調試與解決 當網頁在ff中表現正常，而在 IE7 或更早版本中有異常表現時，可以嘗試激發 haslayout 來看看是不是問題所在。常用的方法是給某元素 css 設定zoom:1。使用 zoom:1 是因為大多數情況下，它能在不影響現有環境的條件下激發元素的 haslayout。而一旦問題消失，那基本上就可以判斷是haslayout 的原因。然後就可以通過設定相應的 css 屬性來對這個問題進行修正了。建議首先要考慮的是設定元素的width/height 屬性，其次再考慮其他屬性。 對於IE7 ，最好的辦法是設定最小高度屬性為0；這個技術是無害的，因為0本來就是這個屬性的初始值。而且沒有必要對其他瀏覽器隱藏這個屬性。 對 IE6 及更早版本來說，常用的方法被稱為霍莉破解(Holly hack)，即設定這個元素的高度為 1%(height:1%;)。需要注意的是，當這個元素的 overflow 屬性被設定為 visible 時，這個方法就失效了。或者使用 IE的條件注釋。