怎樣理解IE瀏覽器專有的CSS屬性hasLayout-創(chuàng)新互聯(lián)

怎樣理解IE瀏覽器專有的CSS屬性hasLayout，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

兗州網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),兗州網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為兗州成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的兗州做網(wǎng)站的公司定做！

一.hasLayout 是什么？
hasLayout 與 BFC 有很多相似之處，但 hasLayout 的概念會(huì)更容易理解。在 Internet Explorer 中，元素使用“布局”概念來控制尺寸和定位，分為擁有布局和沒有布局兩種情況，擁有布局的元素由它控制本身及其子元素的尺寸和定位，而沒有布局的元素則通過父元素（最近的擁有布局的祖先元素）來控制尺寸和定位，而一個(gè)元素是否擁有布局則由 hasLayout 屬性告知瀏覽器，它是個(gè)布爾型變量，true 代表元素?fù)碛胁季?，false 代表元素沒有布局。簡(jiǎn)而言之，hasLayout 只是一個(gè) IE 下專有的屬性，hasLayout 為 true 的元素瀏覽器會(huì)賦予它一系列的效果。

特別注意的是，hasLayout 在 IE 8 及之后的 IE 版本中已經(jīng)被拋棄，所以在實(shí)際開發(fā)中只需針對(duì) IE 8 以下的瀏覽器為某些元素觸發(fā) hasLayout 。

一個(gè)元素觸發(fā) hasLayout 會(huì)影響一個(gè)元素的尺寸和定位，這樣會(huì)消耗更多的系統(tǒng)資源，因此 IE 設(shè)計(jì)者默認(rèn)只為一部分的元素觸發(fā) hasLayout （即默認(rèn)有部分元素會(huì)觸發(fā) hasLayout ，這與 BFC 基本完全由開發(fā)者通過特定 CSS 觸發(fā)并不一樣），這部分元素如下：

body and html
table, tr, th, td
img
hr
input, button, file, select, textarea, fieldset
marquee
frameset, frame, iframe
objects, applets, embed

二.如何觸發(fā) hasLayout
除了 IE 默認(rèn)會(huì)觸發(fā) hasLayout 的元素外，Web 開發(fā)者還可以使用特定的 CSS 觸發(fā)元素的 hasLayout 。

通過為元素設(shè)置以下任一 CSS ，可以觸發(fā) hasLayout （即把元素的 hasLayout 屬性設(shè)置為 true）。

float: (left 或 right)
position: absolute
display: inline-block
width: (除 auto 外任何值)
height: (除 auto 外任何值)
writing-mode: tb-rl
zoom: (除 normal 外任意數(shù)值，包括設(shè)置為效果等同于 normal 的 1 也有效)
另外，一些 CSS 在 IE 7 下亦能觸發(fā) hasLayout。

min-width: (包含 0 在內(nèi)的任意值)
max-width: (除 none 外任意值)
min-height: (包含 0 在內(nèi)的任意值)
max-height: (除 none 外任意值)
overflow 除了 visible 以外的值（hidden，auto，scroll）
position: fixed
對(duì)于內(nèi)聯(lián)元素(可以是默認(rèn)被瀏覽器認(rèn)為是內(nèi)聯(lián)元素的 span 元素，也可以是設(shè)置了 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 不能在此種情況下令該元素觸發(fā) hasLayout 。但 zoom 除了在 IE 5.0 中外，總是能觸發(fā) hasLayout 。zoom 用于設(shè)置或檢索元素的縮放比例，為元素設(shè)置 zoom: 1 既可以觸發(fā)元素的 hasLayout 同時(shí)不會(huì)對(duì)元素造成多余的影響。因此綜合考慮瀏覽器之間的兼容和對(duì)元素的影響，Kayo 建議使用 zoom: 1 來觸發(fā)元素的 hasLayout 。

三.觸發(fā) hasLayout 的效果
雖然 hasLayout 也會(huì)像 BFC 那樣影響著元素的尺寸和定位，但它卻又不是一套完整的標(biāo)準(zhǔn)，并且由于它默認(rèn)只為某些元素觸發(fā)，這導(dǎo)致了 IE 下很多前端開發(fā)的 bugs ，觸發(fā) hasLayout 更大的意義在于解決一些 IE 下的 bugs ，而不是利用它的一些“副作用”來達(dá)到某些效果。另外由于觸發(fā) hasLayout 的元素會(huì)出現(xiàn)一些跟觸發(fā) BFC 的元素相似的效果，因此為了統(tǒng)一元素在 IE 與支持 BFC 的瀏覽器下的表現(xiàn)，Kayo 建議為觸發(fā)了 BFC 的元素同時(shí)觸發(fā) hasLayout ，當(dāng)然還需要考慮實(shí)際的情況，也有可能只需觸發(fā)其中一個(gè)就可以達(dá)到表現(xiàn)統(tǒng)一，下面會(huì)舉例介紹。

這里首先列出觸發(fā) hasLayout 元素的一些效果：

1.阻止外邊距折疊

兩個(gè)相連的 div 在垂直上的外邊距會(huì)發(fā)生疊加，而觸發(fā) hasLayout 的元素之間則不會(huì)有這種情況發(fā)生，如下圖：

上圖的例子中，三個(gè) div 各包含一個(gè) p 元素，三個(gè) div 及其包含的 p 元素都有頂部和底部的外邊距，但只有第三個(gè) div 的邊距沒有與它的子元素 p 的外邊距折疊。這是因?yàn)榈谌齻€(gè) div 使用 zoom: 1 觸發(fā)了 hasLayout ，阻止了它與它的子元素的外邊距折疊。

另外，例子中也使用了 overflow: hidden 觸發(fā)元素的 BFC ，這利用了 BFC 阻止外邊距折疊的特性達(dá)到元素在 IE 與現(xiàn)代瀏覽器下的表現(xiàn)統(tǒng)一。

2.可以包含浮動(dòng)的子元素，即計(jì)算高度時(shí)包括其浮動(dòng)子元素

效果如圖：

上圖的例子中，有兩個(gè) div ，它們各包含一個(gè)設(shè)置了浮動(dòng)的 p 元素，但第一個(gè) div 實(shí)際被瀏覽器判斷為沒有高度和寬度，即高度為 0 ，上下邊框重疊在一起。而第二個(gè) div 使用 zoom: 1 觸發(fā)了 hasLayout ，可以包含浮動(dòng)元素，因此能正確表現(xiàn)出高度，其邊框位置也正常了。

本例子中也使用了 overflow: hidden 觸發(fā) BFC ，跟上例相似，這利用了 BFC 可以包含浮動(dòng)子元素的特性達(dá)到元素在 IE 與現(xiàn)代瀏覽器下的表現(xiàn)統(tǒng)一。

3.背景圖像顯示問題

元素背景圖不能正確顯示是網(wǎng)頁重構(gòu)中最常見的問題之一了，在 IE 7 及以下的 IE 版本中，沒有設(shè)置高度、寬度的元素往往不能顯示出背景圖（背景色則顯示正常），這實(shí)際上與 hasLayout 有關(guān)。實(shí)際的情況是，沒有觸發(fā) hasLayout 的元素不能顯示背景圖，上面有說過，觸發(fā) hasLayout 也就是使到元素?fù)碛胁季郑瑩Q句話說，擁有布局的元素才能正確顯示背景圖。如下圖：

上圖兩個(gè) div 都設(shè)置了背景圖，但只有使用 zoom: 1 觸發(fā)了 hasLayout 的第二個(gè) div 才能正確顯示背景圖。

本例子中沒有觸發(fā)元素的 BFC ，這是因?yàn)樵诂F(xiàn)代瀏覽器中，元素本身并沒有背景圖顯示問題。

可以看出，上面的第一、二個(gè)例子中，為了使到元素在 IE (包括低版本 IE 以及較新版本的 IE)和現(xiàn)代瀏覽器中表現(xiàn)盡量統(tǒng)一同時(shí)觸發(fā)了 hasLayout 和 BFC ，而第三個(gè)例子中的問題因?yàn)橹辉诘桶姹?IE 中出現(xiàn)，所以只需為低版本 IE 觸發(fā) hasLayout ，這些技巧在實(shí)際項(xiàng)目中需要特別注意。

上面也有說道，hasLayout 與很多 IE 下的顯示 bugs 都有關(guān)，實(shí)際上很多莫名奇妙的 bugs 都因 hasLayout 而起，因此只要適當(dāng)?shù)挠|發(fā)元素的 hasLayout ，很多 IE bugs 往往就能解決。這里 Kayo 列舉幾個(gè)例子：

IE 6 及更低版本下浮動(dòng)元素雙倍 margin bug - 為元素設(shè)置 display: inline 可以解決
IE 5-6 的 3 像素偏移 bug - 為元素設(shè)置 _height: 1% 可以解決

關(guān)于怎樣理解IE瀏覽器專有的CSS屬性hasLayout問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

標(biāo)題名稱：怎樣理解IE瀏覽器專有的CSS屬性hasLayout-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article22/dsesjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、企業(yè)建站、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)