CSS基礎篇--CSS中IE瀏覽器的hasLayout，IE低版本的bug根源

時間 2019-11-08

標籤 css 基礎瀏覽器 haslayout 版本 bug 根源欄目 CSS 简体版

原文原文鏈接

什麼是hasLayout？

hasLayout是IE特有的一個屬性。不少的ie下的css bug都與其息息相關。在ie中，一個元素要麼本身對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值爲true時，它負責對本身和可能的子孫元素進行尺寸計算和定位。雖然這意味着這個元素須要花更多的代價來維護自身和裏面的內容，而不是依賴於祖先元素來完成這些工做。javascript

哪些元素默認有hasLayout屬性

在IE瀏覽器中下列默認hasLayout=true的元素
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>css

不少狀況下，咱們把 hasLayout的狀態改爲true 就能夠解決很大部分ie下顯示的bug。
這兒所示的bug通常指的是IE7以及如下的瀏覽器。html

如何設置haslayout？

下面列出能夠觸發hasLayout的一些CSS屬性值。java

position: absolute (取消使用：static)
float: left or right(取消使用：none)
display: inline-block (取消使用：其它值)
width: 除了auto之外的值(取消使用：auto)
height: 除了auto之外的值(取消使用：auto)
zoom: 有值(取消使用：normal或者空值)

ie7還有一些額外的屬性能夠觸發該屬性（不徹底列表）：瀏覽器

min-height: (網上查看說是任何值，但實踐發現仍是除了none與auto)
max-height: (任何值除了none與auto)
min-width: (網上查看說是任何值，但實踐發現仍是除了none與auto)
max-width: (任何值除了none與auto)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)
position: fixed

js測試一個元素是否有layout

<div id="menu" onclick="javascript:alert(menu.currentStyle.hasLayout)">這個是文本內容</div>

在IE瀏覽器中點擊這個ID爲menu的DOM元素，若是元素有layout，那麼彈出來的結果是true,不然爲false。app

舉例

1.當一個元素內含浮動或絕對定位的內容時，它一般會表現出奇怪和錯誤的行爲，看下面的代碼：
html:測試

<div id="nofloatbox">
    <div id="floatbox"></div>
</div>

css：spa

#nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    zoom:1;
}
#floatbox {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #0000FF;
    background: #00FF00;
}

IE瀏覽器獲得的結果如圖所示：
firefox

可見無浮動的div並無被裏面的浮動元素的高度撐開，其高度並不會自動計算。咱們下面再給這個無浮動的div加上個zoom:1;來觸發其hasLayout屬性試試，css代碼以下：code

#nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    zoom:1;
}

在IE7以及低版本瀏覽器獲得的結果如圖：

那麼其它標準瀏覽器就至關於清除子元素的浮動就能夠，在父元素中添加overflow:hidden就能夠。

2.hasLayout對於內聯元素也能夠有效果，當內聯元素的hasLayout爲true的時候，能夠給這個內聯元素設定高度和寬度並獲得指望的效果,（這兒是指IE7以及低版本瀏覽器）以下例：

<p>今天的<span style="width: 100px; height: 50px; background: #DDD;">天氣</span>真好</p>

瀏覽器的效果如圖所示：

下面給span加上zoom: 1;來觸發hasLayout：

<p>今天的<span style="width: 100px; height: 50px; background: #DDD;zoom:1">天氣</span>真好</p>

在IE7瀏覽器中的效果如圖所示：

注意：要注意的是，hasLayout是微軟專有的東西，對firefox,Chrome等比較遵照標準的瀏覽器就無效了，所以不可太過依賴。其實依據合理的語義化，恰當的文檔流，正確的標準化所生產出來的頁面，在各個公司出品的標準渲染的瀏覽器下，通常並不會存在太多兼容性的問題的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。