IE，這個(gè)令所有網(wǎng)站設(shè)計(jì)人員討厭，但又不得不為它工作的瀏覽器。不論是6、7還是8，它們都有一個(gè)共同的渲染標(biāo)準(zhǔn)haslayout，所以haslayout 是一個(gè)非常有必要徹底弄清除的概念。大多 數(shù)IE下的顯示錯(cuò)誤，就是源于它。

什么是Layout呢？
"Layout" 是 IE 的一個(gè)私有屬性，并不是W3C標(biāo)準(zhǔn)。它決定了一個(gè)對(duì)象（就是一個(gè)標(biāo)簽div、li等）在內(nèi)容中如何顯示、與周圍對(duì)象的位置關(guān)系、以及怎樣響應(yīng)程序或用戶產(chǎn)生的事件。

這個(gè)屬性可以被一些css強(qiáng)制激活。一些HTML標(biāo)簽?zāi)J(rèn)具有haslayout。
PS：一個(gè)對(duì)象的layout屬性被激活，它的具體表現(xiàn)就是haslayout=true。我們可以用IE Developer Toolbar工具看到被激活的對(duì)象帶有"haslayout = -1"的屬性。

下面這些標(biāo)簽?zāi)J(rèn)擁有haslayout屬性：

你可能就問(wèn)：微軟干嘛要設(shè)layout這個(gè)東西呢？當(dāng)一個(gè)對(duì)象的layout被激活時(shí)，它以及它的子對(duì)象的定位和尺寸計(jì)算將獨(dú)立進(jìn)行，不受附近對(duì)象 的干擾。也就是說(shuō)它擁有一個(gè)獨(dú)立的布局（layout）。因此瀏覽器要花費(fèi)更多的代價(jià)來(lái)處理?yè)碛衕aslayout的對(duì)象。為了提高性能，微軟增加了 layout這個(gè)IE私有的概念。

怎樣激活layout？
下面列出的css屬性可以激活對(duì)象的layout：

設(shè)置絕對(duì)定位可能會(huì)引發(fā)新的問(wèn)題。

IE下的浮動(dòng)也會(huì)產(chǎn)生一些莫名其妙的問(wèn)題。

當(dāng)一個(gè)內(nèi)聯(lián)元素需要haslayout屬性時(shí)就需要用它，但是IE本身不支持inline-block的，只是表現(xiàn)得像標(biāo)準(zhǔn)里說(shuō)的inline-block。
1.width: 除'auto'外的任意值
優(yōu)先考慮使用該屬性。
2.height: 除'auto'外的任意值
對(duì) IE6 及更早版本來(lái)說(shuō)很常用，該方法被稱為霍莉破解(Holly hack)，即設(shè)定這個(gè)元素的高度為 1% (height:1%;)。但是要注意，當(dāng)這個(gè)元素的 overflow 屬性被設(shè)置為 visible 時(shí)，這個(gè)方法就失效了。
3.zoom: 除'normal'外的任意值
又一個(gè)ie私有屬性，不兼容標(biāo)準(zhǔn)。zoom:1可以在測(cè)試或者不追求標(biāo)準(zhǔn)的情況下使用，效果不錯(cuò)。

ie私有屬性，不推薦用。
IE7 還有一些額外的屬性：

1.min-height: (任意值)
2.max-height: (除 none 外任意值)
3.min-width: (任意值)
4.max-width: (除 none 外任意值)
5.overflow: (除 visible 外任意值)
6.overflow-x: (除 visible 外任意值)
7.overflow-y: (除 visible 外任意值)
8.position: fixed

重置haslayout
在沒(méi)有其它屬性激活layout的情況下，使用下面的css可以重置haslayout屬性：

1.width, height (設(shè)為 "auto")
2.max-width, max-height (設(shè)為 "none")(在 IE 7 中)
3.position (設(shè)為 "static")
4.float (設(shè)為 "none")
5.overflow (設(shè)為 "visible") (在 IE 7 中)
6.zoom (設(shè)為 "normal")
7.writing-mode (從 "tb-rl" 設(shè)為 "lr-t")
display 屬性的不同：當(dāng)用"inline-block"激活了haslayout 屬性時(shí)，就算在一條獨(dú)立的規(guī)則中覆蓋這個(gè)屬性為"block"或"inline"，haslayout 這個(gè)標(biāo)志位也不會(huì)被重置為 false。

把 mid-width, mid-height 設(shè)為它們的默認(rèn)值"0"仍然會(huì)賦予 hasLayout，但是 IE 7 卻可以接受一個(gè)不合法的屬性"auto"來(lái)重置 hasLayout。

觸發(fā) hasLayout 清除浮動(dòng)
樣例：

或

或

'Layout' 是 IE 的專有概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位和尺寸計(jì)算，與其他元素的關(guān)系和相互作用，以及對(duì)應(yīng)用還有使用者的影響。

'Layout' 可以被某些 CSS property（特性）不可逆的觸發(fā)，而某些 HTML 元素本身就具有 layout 。

'Layout' 在 IE 中可以通過(guò) hasLayout 屬性來(lái)判斷一個(gè)元素是否擁有 layout ，如 object.currentStyle.hasLayout 。

'Layout' 是 IE 瀏覽器渲染引擎的一個(gè)內(nèi)部組成部分。在 IE 瀏覽器中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行組織和計(jì)算大小， 要么依賴于包含塊來(lái)計(jì)算尺寸和組織內(nèi)容。為了協(xié)調(diào)這兩種方式的矛盾，渲染引擎采用了 'hasLayout' 屬性，屬性值可以為 true 或 false。 當(dāng)一個(gè)元素的 'hasLayout' 屬性值為 true 時(shí)，我們說(shuō)這個(gè)元素有一個(gè)布局（layout），或擁有布局。

最新評(píng)論