術(shù)語(yǔ)

當(dāng)我們說(shuō)一個(gè)元素“得到 layout”，或者說(shuō)一個(gè)元素“擁有 layout” 的時(shí)候，我們的意思是指它的微軟專(zhuān)有屬性 hasLayout 為此被設(shè)為了 true 。一個(gè)“l(fā)ayout元素”可以是一個(gè)默認(rèn)就擁有 layout 的元素或者是一個(gè)通過(guò)設(shè)置某些 CSS 屬性得到 layout 的元素。

而“無(wú)layout元素”，是指 hasLayout 未被觸發(fā)的元素，比如一個(gè)未設(shè)定寬高尺寸的干凈 div 元素就可以做為一個(gè)“無(wú)layout祖先”。

給一個(gè)默認(rèn)沒(méi)有 layout 的元素賦予 layout 的方法包括設(shè)置可觸發(fā) hasLayout = true 的 CSS 屬性。參考默認(rèn) layout 元素以及這些屬性列表。沒(méi)有辦法設(shè)置 hasLayout = false ， 除非把一開(kāi)始那些觸發(fā) hasLayout = true 的 CSS 屬性去除。

默認(rèn)layout元素

下列元素應(yīng)該是默認(rèn)具有 layout 的：

• html>, body>
• table>, tr>, th>, td>
• img>
• hr>
• input>, select>, textarea>, button>
• iframe>, embed>, object>, applet>
• marquee>

屬性

下列 CSS 屬性和取值將會(huì)讓一個(gè)元素獲得 layout：

position: absolute

絕對(duì)定位元素的包含區(qū)塊(containing block)就會(huì)經(jīng)常在這一方面出問(wèn)題。

float: left|right

由于 layout 元素的特性，浮動(dòng)模型會(huì)有很多怪異的表現(xiàn)。

display: inline-block

當(dāng)一個(gè)內(nèi)聯(lián)級(jí)別的元素需要 layout 的時(shí)候往往就要用到它，這也可能也是這個(gè) CSS 屬性的唯一效果——讓某個(gè)元素?fù)碛?layout。“inline-block行為”在IE中是可以實(shí)現(xiàn)的，但是非常與眾不同： IE/Win: inline-block and hasLayout 。

width: 除 “auto” 外的任意值

很多人遇到 layout 相關(guān)問(wèn)題發(fā)生時(shí)，一般都會(huì)先嘗試用這個(gè)來(lái)修復(fù)。

height: 除 “auto” 外的任意值

height: 1% 就在 Holly Hack 中用到。

zoom: 除 “normal” 外的任意值 (MSDN)

MS專(zhuān)有屬性，無(wú)法通過(guò)校驗(yàn)。 不過(guò) zoom: 1 可以臨時(shí)用做調(diào)試。

writing-mode: tb-rl (MSDN)

MS專(zhuān)有屬性，無(wú)法通過(guò)校驗(yàn)。

在 IE7 中，overflow 也變成了一個(gè) layout 觸發(fā)器：

overflow: hidden|scroll|auto

這個(gè)屬性在之前版本 IE 中沒(méi)有觸發(fā) layout 的功能。

overflow-x|-y: hidden|scroll|auto

overflow-x 和 overflow-y 是 CSS3 盒模型中的屬性，尚未得到瀏覽器的廣泛支持。他們?cè)谥鞍姹綢E中沒(méi)有觸發(fā) layout 的功能。

另外 IE7 的熒幕上又新添了幾個(gè) haslayout 的演員，如果只從 hasLayout 這個(gè)方面考慮，min/max 和 width/height 的表現(xiàn)類(lèi)似，position 的 fixed 和 absolute 也是一模一樣。

position: fixed

./.

min-width: 任意值

就算設(shè)為0也可以讓該元素獲得 layout。

max-width: 除 “none” 之外的任意值

./.

min-height: 任意值

即使設(shè)為0也可以讓該元素的 haslayout=true

max-height: 除 “none” 之外的任意值

./.

以上結(jié)論借助 IE Developer Toobar 以及預(yù)先測(cè)試得出。

有關(guān)內(nèi)聯(lián)級(jí)別元素

對(duì)于內(nèi)聯(lián)元素(可以是默認(rèn)即為內(nèi)聯(lián)的比如 span 元素，也可以是 display: inline 的元素)

• width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下觸發(fā) hasLayout 。而對(duì)于 IE6，如果瀏覽器運(yùn)行于標(biāo)準(zhǔn)兼容模式下，內(nèi)聯(lián)元素會(huì)忽略 width 或 height 屬性，所以設(shè)置 width 或 height 不能在此種情況下令該元素具有 layout。
• zoom 總是可以觸發(fā) hasLayout，但是在 IE5.0 中不支持。

具有“l(fā)ayout” 的元素如果同時(shí)也 display: inline ，那么它的行為就和標(biāo)準(zhǔn)中所說(shuō)的 inline-block 很類(lèi)似了：在段落中和普通文字一樣在水平方向和連續(xù)排列，受 vertical-align 影響，并且大小可以根據(jù)內(nèi)容自適應(yīng)調(diào)整。這也可以解釋為什么單單在 IE/Win 中內(nèi)聯(lián)元素可以包含塊級(jí)元素而少出問(wèn)題，因?yàn)樵趧e的瀏覽器中 display: inline 就是內(nèi)聯(lián)，不像 IE/Win 一旦內(nèi)聯(lián)元素?fù)碛?layout 還會(huì)變成 inline-block。

腳本屬性 hasLayout

我們這里稱(chēng) hasLayout 為“腳本屬性”是為了和我們熟知的 CSS 屬性相區(qū)別。

注意一旦一個(gè)元素?fù)碛辛?layout，就沒(méi)有辦法再將其設(shè)成 hasLayout = False 了。

hasLayout-property 可以用來(lái)檢測(cè)一個(gè)元素是否擁有 layout：舉個(gè)例子，如果它的 id 是“eid”，那么只要在 IE5.5+ 的地址欄里輸入 javascript: alert(eid.currentStyle.hasLayout) 即可檢測(cè)它的狀態(tài)。

IE的 Developer Toolbar 可以實(shí)時(shí)檢查一個(gè)元素的當(dāng)前樣式；如果 hasLayout 是 true ，那么它的值顯示為 “-1”。 我們可以通過(guò)實(shí)時(shí)修改一個(gè)元素的屬性將“zoom(css)”設(shè)置為“1”來(lái)觸發(fā) hasLayout 以便調(diào)試。

另外一個(gè)需要注意的是“l(fā)ayout”會(huì)影響腳本編程。如果一個(gè)元素沒(méi)有“l(fā)ayout”，那么clientWidth/clientHeight 總是返回0。這會(huì)讓一些腳本新手感到困惑，而且這和 Mozilla 瀏覽器的處理方式也不一樣。不過(guò)我們可以利用這一點(diǎn)在 IE5.0 中檢測(cè)“l(fā)ayout”：如果 clientWidth 是零那么這個(gè)元素就沒(méi)有 layout。

/* \*/
* html .gainlayout { height: 1%; }
/* */	

.gainlayout { _height: 0; }

!--[if lte IE 6]>
style>
.gainlayout { height: 1px; }
/style>
![endif]-->

link rel="stylesheet" href="allbrowsers.css" type="text/css" />
	
!--[if lte IE 6]>
link rel="stylesheet" href="iefix.css" type="text/css" />
![endif]-->

Hack整理

但是瀏覽器總是會(huì)變的，我們需要面對(duì)很多問(wèn)題，比如一些依賴(lài) IE6 的 bug 所做的 hack 會(huì)在 IE7 或更高版本的新瀏覽器中因 bug 修復(fù)而失效(甚至有害)的問(wèn)題；比如新版本瀏覽器中類(lèi)似的布局 bug 依然存在但用于 hack 的過(guò)濾器比如 * html 卻不能正常工作的問(wèn)題。這種情況下，MS專(zhuān)有屬性 zoom 就可以考慮使用了。

!--[if lt IE 7]>style>
/* IE 6 + IE5.5 + IE5.0 所用樣式*/
.gainlayout { height: 0; }
/style>![endif]-->
	
!--[if IE 7]>style>
.gainlayout { zoom: 1;}
/* 或者其他任何以后可能需要的東西 */
/style>![endif]-->

• zoom: 1; 可以讓 IE5.5+ 的任何元素(包括內(nèi)聯(lián)元素)獲得 layout，但是在 IE5.0 中無(wú)效。
• 沒(méi)有其他附帶效果(內(nèi)聯(lián)元素會(huì)變成 inline-block，這個(gè)當(dāng)然)。
• 如果需要通過(guò)驗(yàn)證，應(yīng)該用條件注釋將 zoom 隱藏起來(lái)。

其實(shí)當(dāng)我們考慮到“向后兼容”時(shí)是很自相矛盾的，我們強(qiáng)烈建議頁(yè)面設(shè)計(jì)者回過(guò)頭看一下自己頁(yè)面中用的到的明顯的或是不明顯的“hacks”，并用條件注釋針對(duì)不同瀏覽器重新處理以保萬(wàn)無(wú)一失。

清除浮動(dòng)和自動(dòng)擴(kuò)展適應(yīng)高度

浮動(dòng)元素會(huì)被 layou 元素自動(dòng)包含。這是很多新手經(jīng)常遇到的問(wèn)題：在 IE 下完成的頁(yè)面到了標(biāo)準(zhǔn)兼容瀏覽器下所有未清除的浮動(dòng)元素都伸出了其包含容器之外。

• Containing Floats
• how to clear floats without structural markup

相反的情況：如果確實(shí)需要一個(gè)浮動(dòng)元素伸出其包含容器，也就是自動(dòng)包含不是想要的效果時(shí)，該怎么辦？你很可能也會(huì)遇到這種頭疼的問(wèn)題，下面的深入討論就是一個(gè)例子：

• acidic float tests

在IE中，一個(gè)浮動(dòng)元素總是“隸屬于”它的 layout 包含容器。而后面的元素會(huì)受這個(gè) layout 包含容器影響而不是這個(gè)浮動(dòng)元素影響。

這個(gè)特性和IE6的那個(gè)自動(dòng)擴(kuò)展以適應(yīng)內(nèi)部?jī)?nèi)容寬度的特性，都可以看成是受這個(gè)規(guī)則影響的：“由它的邊界矩形框決定”。

更糟的問(wèn)題：clear 無(wú)法影響其 layout 包含容器之外的 float 元素。如果依賴(lài)這個(gè) bug 在 IE 中布局的頁(yè)面要轉(zhuǎn)到標(biāo)準(zhǔn)兼容瀏覽器中，只有全部重做。

IE 的自動(dòng)包含浮動(dòng)元素也是經(jīng)常需要的效果，它在其他瀏覽器中也可以達(dá)到：參考我們的 “和 CSS 規(guī)范類(lèi)似的地方” 這一部分來(lái)了解一下包含浮動(dòng)元素的相關(guān)內(nèi)容。

浮動(dòng)元素旁邊的元素

當(dāng)一個(gè)塊級(jí)元素緊跟在一個(gè)左浮動(dòng)元素之后時(shí)，它應(yīng)該——作為一個(gè)塊級(jí)元素——忽略這個(gè)浮動(dòng)元素，而它的內(nèi)容則應(yīng)該因這個(gè)浮動(dòng)元素而移位：一個(gè)緊跟在左浮動(dòng)元素后的塊級(jí)元素內(nèi)的文字內(nèi)容，應(yīng)該沿著浮動(dòng)元素的右邊順序排列并會(huì)（如果它的長(zhǎng)度超過(guò)浮動(dòng)元素）繼續(xù)排列到浮動(dòng)元素下方。但是如果這個(gè)塊級(jí)元素有 layout，比如由于某種原因被設(shè)置了寬度，那么這整個(gè)元素則會(huì)因浮動(dòng)元素而移位，就好像它自己也是一個(gè)浮動(dòng)元素一樣，因此其中的文字就不再環(huán)繞這個(gè)左浮動(dòng)元素了（而會(huì)形成一個(gè)矩形區(qū)域，保持在它的右邊。）

在 IE5 中一個(gè)塊級(jí)元素的百分比寬度是基于浮動(dòng)元素旁邊的剩余空間計(jì)算的，而在 IE6 中則是依照整個(gè)父塊級(jí)元素的可用空間計(jì)算的。所以在 IE6 中設(shè)置 width: 100% 會(huì)導(dǎo)致某種浮動(dòng)元素旁邊的溢出現(xiàn)象，于是各種布局問(wèn)題也會(huì)因此而來(lái)。

一些關(guān)于浮動(dòng)塊旁邊的 hasLayout 塊的測(cè)試案例：

• by using width
• by using min-width (IE 7) and zoom (IE 6)

與此類(lèi)似，和浮動(dòng)元素相鄰的相對(duì)定位元素，它的位置偏移量應(yīng)該參照的是父元素的補(bǔ)白(padding)邊緣(例如，left: 0; 應(yīng)該將一個(gè)相對(duì)定位元素疊放于它前面的浮動(dòng)元素之上)。在 IE6 中，偏移量 left: value; 是從浮動(dòng)元素的右邊距(margin)邊緣開(kāi)始算起的，這會(huì)因浮動(dòng)元素所占的寬度變化導(dǎo)致水平方向的錯(cuò)位(一個(gè)解決方法是用 margin-left 代替，但是也要注意如使用百分值時(shí)會(huì)有一些怪異問(wèn)題)。

• layout blocks with relative positioning adjacent to floated blocks

根據(jù)規(guī)范所述，浮動(dòng)元素應(yīng)該與其后的盒子交織在一起。而對(duì)于沒(méi)有交叉的二維空間中的矩形而言這是無(wú)法實(shí)現(xiàn)的。

如果誰(shuí)真的需要向 IE 的這種不當(dāng)行為屈服，那么如何讓標(biāo)準(zhǔn)兼容瀏覽器中的盒子也有類(lèi)似行為——即類(lèi)似于 layout 盒子會(huì)自動(dòng)“收縮”而給其前置的浮動(dòng)元素讓出空間的行為——就是一個(gè)問(wèn)題了。我們給出的方法是跟著一個(gè)浮動(dòng)元素創(chuàng)建一個(gè)新的塊級(jí)格式化范圍（block formatting context），這在我們的“和 CSS 規(guī)范類(lèi)似的地方” 有討論。

可以(再次)訪(fǎng)問(wèn)下面這個(gè)頁(yè)面：

• three pixel text-jog

我們可以看到跟在一個(gè)浮動(dòng)元素后的 layout 元素不會(huì)顯示這個(gè)3px間隙的 bug，因?yàn)楦?dòng)元素外圍的3px硬邊無(wú)法影響一個(gè) layout 元素的內(nèi)部?jī)?nèi)容，所以這個(gè)硬邊將整個(gè) layout 元素右推了3px。好比一個(gè)防護(hù)罩，layout 可以保護(hù)其內(nèi)部?jī)?nèi)容不受影響，但是浮動(dòng)元素的力量卻將整個(gè)防護(hù)罩推了開(kāi)來(lái)。

列表

無(wú)論是列表本身(ol, ul) 還是單個(gè)的列表元素(li)，擁有 layout 后都會(huì)影響列表的表現(xiàn)。不同版本 IE 的表現(xiàn)又有不同。最明顯的效果就體現(xiàn)在列表符號(hào)上(如果你的列表自定義了列表符號(hào)則不會(huì)受這個(gè)問(wèn)題影響)。這些符號(hào)很可能是通過(guò)某種內(nèi)部機(jī)制附到列表元素上的(通常是附著在它們外面)。不幸的是，由于是通過(guò)“內(nèi)部機(jī)制”添加的，我們無(wú)法訪(fǎng)問(wèn)它們也無(wú)法修正它們的錯(cuò)誤表現(xiàn)。

最明顯的效果有：

• 列表獲得 layout 后，列表符號(hào)會(huì)消失或者被放置在不同的或者錯(cuò)誤的位置。

有時(shí)它們又可以通過(guò)改變列表元素的邊距而重新出現(xiàn)。這看起來(lái)似乎是以下事實(shí)導(dǎo)致的結(jié)果：layout 元素會(huì)試圖裁掉超出其邊界的內(nèi)部?jī)?nèi)容。

• 列表元素獲得 layout 之后，會(huì)有和上面一樣的問(wèn)題出現(xiàn)，更多參考 (extra vertical space between list items)

進(jìn)一步又有一個(gè)問(wèn)題就是(在有序列表中)任何具有 layout 的列表元素似乎都有自己獨(dú)立的計(jì)數(shù)器。比如我們有一個(gè)含五個(gè)列表元素的有序列表，只有第三個(gè)列表元素有 layout。我們會(huì)看到這樣：

1… 2… 1… 4… 5…

此外，如果一個(gè)有 layout 的列表元素跨行顯示時(shí)，列表符號(hào)會(huì)底部對(duì)齊(而不是按照預(yù)料的頂部對(duì)齊)。

以上某些問(wèn)題還是無(wú)法解決的，所以如果需要列表符號(hào)的時(shí)候最好避免讓列表和列表元素獲得 layout。如果需要限定尺寸，最好給別的元素設(shè)定尺寸，比如給整個(gè)列表外面套一個(gè)元素并設(shè)定它的寬度，又或者比如給每個(gè)列表元素中的內(nèi)容設(shè)定高度等等。

另一個(gè)IE中列表的常見(jiàn)問(wèn)題出現(xiàn)在當(dāng)某個(gè) li 中的內(nèi)容是一個(gè) display: block 的錨點(diǎn)(anchor)時(shí)。在這種情況下，列表元素之間的空格將不會(huì)被忽略而且通常會(huì)顯示成額外的一行夾在每個(gè) li 之間。一種避免這種豎直方向多余空白的解決方法是賦予這些錨點(diǎn) layout。這樣還有一個(gè)好處就是可以讓整個(gè)錨點(diǎn)的矩形區(qū)域都可以響應(yīng)鼠標(biāo)點(diǎn)擊。

表格

table 總是有 layout 的，它總表現(xiàn)為一個(gè)已定義寬度的對(duì)象。在IE6中，table-layout: fixed 通常和一個(gè)寬度設(shè)為100%的表格相同，同時(shí)這也會(huì)帶來(lái)很多問(wèn)題(一些計(jì)算方面的錯(cuò)誤)。另外在IE5.5和IE6的quirks模式下還有一些別的需要注意的情況。

相對(duì)定位元素(r.p.)

注意，由于 position: relative 并不觸發(fā) hasLayout，所以很多諸如內(nèi)容消失或錯(cuò)位的渲染錯(cuò)誤就會(huì)因此而起。這些現(xiàn)象可能會(huì)在刷新頁(yè)面、調(diào)整窗口大小、滾動(dòng)頁(yè)面、選中內(nèi)容等情況下出現(xiàn)。原因是 IE 在據(jù)這個(gè)屬性對(duì)元素做偏移處理時(shí)，卻似乎忘了發(fā)出信號(hào)讓其 layout 孩子元素進(jìn)行“重繪”(而如果是一個(gè)layout元素，那么在其重繪事件的信號(hào)鏈中，這個(gè)傳給其孩子的信號(hào)是會(huì)正常發(fā)出的)。

• r.p. parent and disappearing floated child
• disappearing list-background bug

以上是一些相關(guān)問(wèn)題的描述。作為經(jīng)驗(yàn)之談，相對(duì)定位一個(gè)元素時(shí)最好給予其 layout。再有，我們也需要檢查擁有這種結(jié)構(gòu)的父元素是否也需要 layout 或者position: relative亦或二者都需要，如果涉及到浮動(dòng)元素這點(diǎn)就十分重要。

絕對(duì)定位元素(a.p.)：
包含區(qū)塊，什么是包含區(qū)塊？

理解 CSS 的包含區(qū)塊概念很重要，它回答了絕對(duì)定位元素是相對(duì)哪里定位的問(wèn)題：包含區(qū)塊決定了偏移起點(diǎn)，包含區(qū)塊定義了百分比長(zhǎng)度的計(jì)算參考。

對(duì)于絕對(duì)定位元素，包含區(qū)塊是由其最近的定位祖先決定的。如果其祖先都沒(méi)有被定位，那么就使用初始包含區(qū)塊 html。

通常情況下我們會(huì)用 position: relative 來(lái)設(shè)定任意包含區(qū)塊。這就是說(shuō)，我們可以讓一個(gè)絕對(duì)定位元素所參考的原點(diǎn)和長(zhǎng)度等不依賴(lài)于元素的排列順序，這可以滿(mǎn)足諸如“內(nèi)容優(yōu)先”這種可訪(fǎng)問(wèn)性概念的需要，也可以給復(fù)雜的浮動(dòng)布局帶來(lái)方便。

但是由于 layout 概念的存在，這種設(shè)計(jì)理念的效果在IE中就要打個(gè)問(wèn)號(hào)了：因?yàn)樵贗E中絕對(duì)定位只有當(dāng)其包含元素?fù)碛?layout 時(shí)才會(huì)計(jì)算正確，而且絕對(duì)定位元素的百分比寬度參考也搞錯(cuò)了對(duì)象。這里 IE5 和 IE6 的行為不同但都有問(wèn)題。IE7b2 的行為就要好很多，雖然有些小地方還是有錯(cuò)誤。總之盡可能的讓絕對(duì)元素的包含區(qū)塊擁有 layout，而且盡量讓其就是絕對(duì)定位元素的父級(jí)元素（也就是說(shuō)這個(gè)包換元素和絕對(duì)定位元素之間沒(méi)有絕對(duì)定位元素的別的祖先了）。

假設(shè)一個(gè)無(wú) layout 的父元素被相對(duì)定位了——我們就得給它賦予 layout 才能使偏移量起作用：

• Absolutely Buggy II

假設(shè)一個(gè)未定位的父元素需要特定尺寸，而且頁(yè)面設(shè)計(jì)是基于百分比寬度的——我們就可以放棄這個(gè)想法了，因?yàn)闉g覽器支持不佳：

• absolutely positioned element and percentage width

濾鏡

MS專(zhuān)有的濾鏡屬性 filter 是只適用于 layout 元素的。有些濾鏡擴(kuò)展了對(duì)象的邊界。它們會(huì)顯示出自身特有的缺陷。

對(duì)已渲染元素的重排(re-flow)

當(dāng)所有元素都已渲染完成時(shí)，如果有一個(gè)因鼠標(biāo)經(jīng)過(guò)而引起的變化產(chǎn)生(比如某個(gè)鏈接的 background 有變化)，IE會(huì)對(duì)其 layout 包含區(qū)塊進(jìn)行重排。有時(shí)一些元素就會(huì)因此被排到了新的位置，因?yàn)楫?dāng)這個(gè)鼠標(biāo)經(jīng)過(guò)發(fā)生時(shí)，IE已經(jīng)知道了所有相關(guān)元素的寬度、偏移量等數(shù)據(jù)了。這在文檔首次載入時(shí)則不會(huì)發(fā)生，那時(shí)由于自動(dòng)擴(kuò)張的特性，寬度還無(wú)法確定。這種情況會(huì)導(dǎo)致在鼠標(biāo)經(jīng)過(guò)時(shí)頁(yè)面出現(xiàn)跳變。

• Jump on :hover
• quirky percentages: the reflow

這些和重排問(wèn)題相關(guān)的 bug 會(huì)給百分比邊距和補(bǔ)白使用較多的流動(dòng)布局帶來(lái)不少麻煩。

背景原點(diǎn)

MS專(zhuān)有的這個(gè) hasLayout 還會(huì)影響背景的定位和擴(kuò)展。比如，根據(jù) CSS 規(guī)范，background-position: 0 0 應(yīng)該指元素的“補(bǔ)白邊緣(padding edge)”。而在 IE/Win 下，如果 hasLayout = false 則指的是“邊框邊緣(border edge)”，當(dāng) hasLayout=true 時(shí)指的才是補(bǔ)白邊緣：

• Background, Border, hasLayout

邊距重疊

hasLayout 會(huì)影響一個(gè)盒子和其子孫的邊距重疊。根據(jù)規(guī)范，一個(gè)盒子如果沒(méi)有上補(bǔ)白和上邊框，那么它的上邊距應(yīng)該和其文檔流中的第一個(gè)孩子元素的上邊距重疊：

• Collapsing Margins
• Uncollapsing Margins

在 IE/Win 中如果這個(gè)盒子有 layout 那么這種現(xiàn)象就不會(huì)發(fā)生了：似乎擁有 layout 會(huì)阻止其孩子的邊距伸出包含容器之外。此外當(dāng) hasLayout = true 時(shí)，不論包含容器還是孩子元素，都會(huì)有邊距計(jì)算錯(cuò)誤的問(wèn)題出現(xiàn)。

• Margin collapsing and hasLayout

塊級(jí)別的鏈接

hasLayout 會(huì)影響一個(gè)塊級(jí)別鏈接的鼠標(biāo)響應(yīng)區(qū)域(可點(diǎn)擊區(qū)域)。通常 hasLayout = false 時(shí)只有文字覆蓋區(qū)域才能響應(yīng)。而 hasLayout = true 則整個(gè)塊狀區(qū)域都可響應(yīng)。添加了 onclick/onmouseover 等事件的任意塊級(jí)元素也有同樣的現(xiàn)象。

• Block anchors and hasLayout

在頁(yè)面內(nèi)使用鍵盤(pán)瀏覽：探索中

當(dāng)使用 tab 在頁(yè)面中瀏覽時(shí)，如果進(jìn)入了一個(gè)頁(yè)內(nèi)鏈接(in-page link)，那么接下來(lái)再按的 tab 鍵就不會(huì)正常繼續(xù)了：

• hasLayout Property Characterizes IE6 Bug
• Keyboard Navigation and Internet Explorer

tab 鍵會(huì)把用戶(hù)帶到(這通常是錯(cuò)誤的)其最近的 layout 祖先中的第一個(gè)目標(biāo)(如果這個(gè)祖先是由 table， div， span 或某些別的標(biāo)簽構(gòu)成)。

收縮包圍(shrink-wrapping)現(xiàn)象

給已經(jīng)有 width: auto 的元素添加某些屬性會(huì)導(dǎo)致它們?cè)谟?jì)算自身寬度時(shí)使用一種收縮包圍的算法。比如這些屬性 float: left|right, position: absolute|fixed, display: table|table-cell|inline-block|inline-table.

這些屬性造成的現(xiàn)象在IE/Win中也存在，當(dāng)然這是只對(duì)那些它支持的屬性而言。但是當(dāng)一個(gè)應(yīng)該收縮包圍的元素中包含一個(gè)擁有“l(fā)ayout”的塊級(jí)元素時(shí)，在絕大多數(shù)情況下，這個(gè)孩子元素的寬度會(huì)盡可能地?cái)U(kuò)展而與其中包含的內(nèi)容無(wú)關(guān)，同時(shí)也阻止了父元素的收縮包圍現(xiàn)象。

例子：

一個(gè)浮動(dòng)的縱向?qū)Ш綗o(wú)序列表并沒(méi)有收縮包圍，因?yàn)槠渲械逆溄訛榱讼斜淼亩嘤嗫瞻譩ug并擴(kuò)展可點(diǎn)擊區(qū)域而擁有了 layout：a {display: block; zoom: 1;}。

這時(shí)收縮包圍現(xiàn)象只有在以下情況仍然有效：擁有 layout 的孩子元素同時(shí)也被賦予了一個(gè)特定寬度，或者這個(gè)孩子元素本身也是一個(gè)具有收縮包圍特性的元素，比如浮動(dòng)元素。

邊緣裁切

通常而言，當(dāng)一個(gè)盒子包含了諸如伸出其邊緣的內(nèi)容這種更復(fù)雜的結(jié)構(gòu)時(shí)，這個(gè)容器就經(jīng)常需要“hasLayout”來(lái)避免一些渲染錯(cuò)誤。但使用這種常用方法又會(huì)在邊界處理時(shí)左右為難，因?yàn)橐粋€(gè)獲得“l(fā)ayout”的元素會(huì)變成某種自封閉的盒子。

內(nèi)部的內(nèi)容盒子會(huì)被裁切，比如使用負(fù)邊距向外移動(dòng)時(shí)。

• Clipping of negative margined blocks in a hasLayout container

被裁掉的部分當(dāng)內(nèi)容盒子觸發(fā)了“l(fā)ayout”時(shí)可以再次出現(xiàn)，但在 IE6 中需要同時(shí)擁有 position: relative 才行。IE7 在這方面要略有改觀，它不再需要額外的 position: relative 了。