|
屬性
·下列 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�！癷nline-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。
CSS hacks
下面用于觸發(fā) haslayout 的 hack 已經(jīng)經(jīng)過(guò) IE6 及以下版本測(cè)試。今后版本的IE有可能會(huì)對(duì)此做不同處理。如果新版本瀏覽器發(fā)布我們會(huì)重新整理這部分內(nèi)容。
John Gallant 和 Holly Bergevin 在2003年發(fā)布的 Holly hack ：
/* \*/ * html .gainlayout { height: 1%; } /* */
·可以讓 IE5+ 的任意元素獲得 layout，除了標(biāo)準(zhǔn)兼容模式 IE6 中的內(nèi)聯(lián)元素。
·一般都很有效，除了在某些極少情況下，需要用 height:0 或者 1px 更好一些。
·和 overflow: hidden 不相容，除非在 IE6 的標(biāo)注兼容模式下(因?yàn)檫@時(shí)如果父元素沒(méi)有定高，那么height: 1% 會(huì)被變回 height: auto)。
或者我們可以用 underscore hack:
.gainlayout { _height: 0; }
另外，更具有向后兼容性的方法是使用 條件注釋(conditional comments):
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->
在條件注釋中鏈接一個(gè)專(zhuān)門(mén)對(duì) IE/Win 做修正的外部樣式表文件，也不失為一個(gè)安全有效的好方法：
<link rel="stylesheet" href="allbrowsers.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="iefix.css" type="text/css" />
<![endif]-->
我們更傾向于使用 height: 0 和 1px —— 并主張始終使用 height 除非它和別的什么東西沖突 (overflow: hidden)。對(duì)于取值，我們則傾向于避免 1% ，因?yàn)樗赡軙?huì)(雖然很少)引起一些問(wèn)題。
height 不能應(yīng)用于標(biāo)準(zhǔn)模式下的內(nèi)聯(lián)元素。在這種情況下我們可以用 display: inline-block 或 zoom: 1。
我們?cè)催^(guò)一些把 Holly hack 真的當(dāng)作 holy(神圣的) hack 盲目使用的情況，比如對(duì)浮動(dòng)元素使用或者對(duì)已經(jīng)具有特定寬度的元素也使用這個(gè) hack。要記住這個(gè) hack 的目的不是要給某個(gè)元素加一個(gè)高度，而只是要觸發(fā) hasLayout = True 而已。
不要給所有元素設(shè)置 layout：* {_height: 1px;}。所謂過(guò)猶不及，獲得 layout 不等于獲得靈丹妙藥，它只是用來(lái)改變渲染模式。
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ú)一失。
關(guān)于IE Mac 的小問(wèn)題
IE Mac 和 windows 下的 IE 是完全不同的兩個(gè)東西，它們各自擁有自己的渲染引擎，IE Mac 就全然不知“hasLayout”(或contenteditable)所謂何物。相比之下 IE Mac 的渲染引擎要更標(biāo)準(zhǔn)兼容一點(diǎn)，比如 height 就是被當(dāng)作 height 處理，沒(méi)有別的效果。因此針對(duì)“hasLayout”的 hacks 和別的解決方法(特別是通過(guò)使用 height 或 width 屬性的)往往對(duì) IE Mac 來(lái)說(shuō)是有害的，所以需要對(duì)其隱藏。更多的關(guān)于 IE Mac 相關(guān)的問(wèn)題可以在 IE Mac, bugs and oddities pages 找到。
MSDN 文檔
MSDN 中涉及到 hasLayout 這個(gè) MS 屬性的地方寥寥無(wú)幾，而具體解釋 layout 和 IE 渲染模型之間關(guān)系的則少之又少。
在IE4的時(shí)候，除了未經(jīng)絕對(duì)定位也未指定寬高的內(nèi)聯(lián)元素，幾乎所有元素都有某種 layout(MSDN)。在這種早期的layout概念中，像 border, margin, padding 這些屬性被稱(chēng)作“l(fā)ayout屬性”，它們是不能應(yīng)用到一個(gè)簡(jiǎn)單的內(nèi)聯(lián)元素上的。換句話(huà)說(shuō)，“擁有l(wèi)ayout”就可以粗略理解成：“可以擁有這幾個(gè)屬性”。
MSDN 上仍然使用 layout 屬性這種說(shuō)法， 只是含義變了，它們和擁有 layout 的元素已經(jīng)沒(méi)有什么關(guān)系了。在 IE5.5 中方才引入了 MS 的這個(gè)專(zhuān)有屬性 hasLayout，也只是某種內(nèi)部的標(biāo)志位而已。
在 IE5.5 中，MSHTML Editing Platform(即可以通過(guò)設(shè)置來(lái)允許用戶(hù)實(shí)時(shí)編輯、拖動(dòng) layout 元素以及調(diào)整其尺寸等)的文檔中描述了三個(gè)和 layout 相關(guān)的重要特性：
·如果一個(gè) layout 元素中有內(nèi)容，內(nèi)容的排版布局將由它的邊界矩形框決定。
·擁有 layout 的意思基本上就是表示某元素是一個(gè)矩形。
·從內(nèi)部來(lái)說(shuō)，擁有 layout 意思就是一個(gè)元素將自己負(fù)責(zé)繪制其內(nèi)部?jī)?nèi)容。
(Editing Platform)
和 layout 自身相關(guān)的內(nèi)部工作機(jī)制直到2005年8月才有相應(yīng)文檔描述，當(dāng)時(shí)由于 The Web Standards Project和微軟的特別工作小組的原因，Markus Mielke [MSFT] 打開(kāi)了深入討論的大門(mén)：
一般來(lái)說(shuō)，在 Internet Explorer 的 DHTML 引擎中，元素是不對(duì)自己的位置安排負(fù)責(zé)的。雖然一個(gè) div 或者一個(gè) p 元素都在源碼中有一個(gè)位置，在文檔流有一個(gè)位置，但是它們的內(nèi)容卻是由它們最近的一個(gè) layout 祖先(經(jīng)常是 body)控制安排的。這些元素依賴(lài)它們祖先的 layout 來(lái)為他們處理諸如決定大小尺寸和測(cè)量信息等諸多繁重的工作。
(HasLayout概述)
出處：web.Frontend
責(zé)任編輯：moby
上一頁(yè) On having layout [1] 下一頁(yè) On having layout [3]
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁(yè)制作版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) On having layout [2]
