您當前位置：首頁 > 互聯網 > 前端開發人員需要了解的IE hasLayout

前端開發人員需要了解的IE hasLayout

來源：程序員人生發布時間：2014-06-01 02:47:00 閱讀次數：2556次

IE的haslayout是個很糾結的東西，但作為一名合格的前端開發人員來說，haslayout屬性是必須掌握的。

-------------------------------------------------------------------------------------------------------------------------------------------

擁有layout概述

Internet Explorer 中有很多奇怪的渲染問題可以通過賦予其”layout”得到解決。John Gallant 和 Holly Bergevin 把這些問題歸類為”尺寸臭蟲(dimensional bugs)”[32]，意思是這些臭蟲可以通過賦予相應元素某個寬度或高度解決。

“Layout”是一個 Internet Explorer for Windows的私有概念，它決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯系、如何響應和傳遞應用程序事件、用戶事件等。這種渲染特性可以通過某些 CSS 屬性被不可逆轉地觸發。而有些 HTML 元素則默認就具有”layout”。

微軟的開發者們認為元素都應該可以擁有一個”屬性(property)”(這是面向對象編程中的一個概念)，于是他們便使用了 hasLayout，這種渲染特性生效時也就是將 hasLayout 設成了 true 之時。了解hasLayout將對IE的臭蟲會有更多深入的體會甚至解決方案。

通過 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否擁有haslayout，在 IE Developer Toolbar 下，擁有 haslayout 的元素，通常顯示為“haslayout = -1”。

擁有layout的定義

一個元素”得到 layout”，或者說一個元素”擁有 layout” 的時候，是指它的微軟專有屬性 hasLayout 為此被設為了 true 。一個”layout元素”可以是一個默認就擁有 layout 的元素或者是一個通過設置某些 CSS 屬性得到 layout 的元素。而”無layout元素”，是指 hasLayout 未被觸發的元素，比如一個未設定寬高尺寸的干凈 div 元素就可以做為一個”無layout祖先”。

給一個默認沒有 layout 的元素賦予 layout 的方法包括設置可觸發 hasLayout = true 的 CSS 屬性。參考默認 layout 元素以及這些屬性列表。沒有辦法設置 hasLayout = false ，除非把一開始那些觸發 hasLayout = true 的 CSS 屬性去除或重置。

擁有layout的各種問題

Layout 在顯示盒模型時有著不同尋常而且難以預料的效果，而且有時甚至會牽連到他們的子元素。

一個元素是否具有”layout”可能會引發如下的一些問題（包括但不限于）：

IE 很多常見的浮動臭蟲。
元素本身對一些基本屬性的異常處理問題。
容器和其子孫之間的空白邊重疊問題。
使用列表時遇到的諸多問題。
背景圖像的定位偏差問題。
使用腳本時遇到的瀏覽器之間處理不一致的問題。

Layout 的由來

不同于標準屬性，也不像某些瀏覽器的私有 CSS 屬性，layout 無法通過某一個 CSS 聲明直接設定。也就是說沒有”layout屬性”這么一個東西，元素要么本身自動擁有 layout，要么借助一些 CSS 聲明悄悄地獲得 layout。

下列HTML元素默認具有 layout 的：

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

設置以下CSS 屬性會自動使元素獲得 layout：

position: absolute （絕對定位元素的包含區塊就會經常在這一方面出問題）
float: left|right （由于 layout 元素的特性，浮動模型會有很多怪異的表現）
display: inline-block （一種特殊的顯示類型，當一個內聯級別的元素需要 layout 特性時，就可以通過該屬性來實現）
width: 除 “auto” 外的任意值（很多人遇到 layout 相關問題發生時，一般都會先嘗試用這個來修復）
height: 除 “auto” 外的任意值（height: 1% 就在 Holly Hack 中用到）
zoom: 除 “normal” 外的任意值（ IE專有屬性。不過 zoom: 1 可以臨時用做調試）
writing-mode: tb-rl （IE專有屬性）
overflow-x|-y: hidden|scroll|auto （overflow-x 和 overflow-y 是 CSS3 盒模型中的屬性，尚未得到瀏覽器的廣泛支持。他們在之前版本IE中沒有觸發 layout 的功能）

在 IE7 中的 haslayout

position: fixed
overflow: hidden|scroll|auto
min-width: 任意值（就算設為0也可以讓該元素獲得 layout）
max-width: 除 “none” 之外的任意值
min-height: 任意值（即使設為0也可以讓該元素的 haslayout=true）
max-height: 除 “none” 之外的任意值

有關內聯級別元素

對于內聯元素(可以是默認即為內聯的比如 span 元素，也可以是 display: inline 的元素)

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下觸發 hasLayout 。而對于 IE6，如果瀏覽器運行于標準兼容模式下，內聯元素會忽略 width 或 height 屬性，所以設置 width 或 height 不能在此種情況下令該元素具有 layout。
zoom 總是可以觸發 hasLayout，但是在 IE5.0 中不支持。

具有”layout” 的元素如果同時也 display: inline ，那么它的行為就和標準中所說的 inline-block 很類似了：在段落中和普通文字一樣在水平方向和連續排列，受 vertical-align 影響，并且大小可以根據內容自適應調整。這也可以解釋為什么單單在 IE中內聯元素可以包含塊級元素而少出問題，因為在別的瀏覽器中 display: inline 就是內聯，不像 IE中內聯元素擁有 layout 還會變成 inline-block。

重置 hasLayout

在另一條規則中重設以下屬性為默認值將重置(或撤銷)hasLayout，如果沒有其他屬性再添加 hasLayout 的話：