【轉載】擁有布局 IE haslayout

日期：2013-11-29 來源：攀枝花惠康網絡公司

找們那知道瀏覽器有bug，而且Windows上的lE的bug 似乎比太年夜都瀏覽器都多。IE/Win的衣現與其他瀏覽器分歧的原因之一是，顯示引擎使用一個稱為結構(layout)的內部概念。因為布均是一個專門針對顯示引擎內部工作體例的概念，所以一般悄況下不需要體味它?？墒?，結構問題是良多IE/Win顯示bug的根源，所以理解這個概念以及它若何影響CSS是有捂助的。

什么是結構

Windows 上的IE 使用結構概念來節制元素的尺寸和定位。那些稱為擁有結構(have layout)的元素負責自己及其子元素的尺寸和定位。如不美觀一個元旦在沒有擁有結構，那么它的尺寸和位置由比來的擁有結構的祖先元素節制。

IE 顯示引擎操作結構概念削減它的措置開銷。在理想悄況下，所有元素都節制自己的尺寸和定位。可是，這會在IE中導致很年夜的機能問題。是以，IE/Win 開發團隊抉擇只將結構應用于現實需要它的那些元素，這樣就可以充實地削減機能開銷。

在默認情形下擁有結構的元素搜羅:

body
尺度模式中的 html
table
tr, td
img
hr
input, select, textarea, button
iframe, embed, object, applet
marquee

這會導致浮動布間的各類問題更糟的是，良多人使用IE 作為主瀏覽器，他們會俯誤地認為這才是正確的默示，在其他瀏覽器以分歧體例措置濘-動元素時，他們反而會這必不解.

content flow in ie and other browers

結構概念是Windows 上的I E 特有的，而且它不是CS S 屬性.盡管某些CSS 屬性會使元ffi擁有結構，可是在CSS 巾無法顯式地設公布揭曉局.可以使用JavaScript 函數hasLayout 查看一個元親近否擁有結構.如不美觀元素擁有結構，這個函數就返回true ; 否則返回falseo hasLayout 是一個只讀屬性，所以無法使用JavaScript 選行設置.

設宜以下CSS 屬性會自動地使元親擁有結構?

position: absolute
float: left or right
display: inline-block
width: any value
height: any value
zoom: any value (Microsoft property―doesn’t validate)
writing-mode: tb-rl (Microsoft property―doesn’t validate)

結構有什么效不美觀?

結構是良多IElWin 顯示bug 的根源。例如，如不美觀一個文本段落靠谷一個浮動元索，那么期望文本環繞這個元索。可是，在Windows 上的1E 6 和更低版本巾，如不美觀段落擁有結構(例如，因為設置了高度).那么它就被限制為矩形，是以阻止文本國繞浮動元素〈見圖9-5).

Figure Above: 期望文本環繞相鄰的浮動元素，可是，在IE/Win上，如不美觀文本元素擁有結構，就不會這樣顯示。

另-個問題涉及擁有結構的元素若何確定自己的尺，如不美觀元親的內容變得比元素自己年夜，那么期望元素流出到元素外.可是，在Windows 上的IE 6 和更低版本中，擁有結構的元素會銷誤地擴展以北梢摩內容的尺寸(見圈9-6).

Figure Above: 擁有結構的錯誤的擴展以北梢摩內容

這意味IE/Win中的width 現實上更像min-width. 這種行為也是在IE/Win中良多浮動結構被破損的原因。當浮動框的內容錯誤地迫使框的寬度增添時，框對于可用空間來說太年夜了，是以下降到其他浮動元素不才面.

不才一節中，我們將談判一些最常見的瀏覽器bug. 你會注重到對于Windows 上的IE的良多修復體例都涉及經由過程設置屬性迫使元素擁有結構。現實上，如不美觀碰著一個IE/Wi n bug，首先應該做的工作之一就是考試考試經由過程應用軌則迫使元崇擁有結構?？纯催@是否可以修復問題。

如不美觀希忘進一步體味IE的內部hasLayout屬性，我建議閱讀http://tinyurl.com/acg78上的”On Having Layout”。【我的翻譯文章在這里IE Haslayout 詳解】

常見bug及其修復體例

最常見且最輕易發現的bug 之一是IE6和更低版本中的雙空白邊浮動bug。顧名思義，這個Windows bug使任何浮動元素上的空白邊加倍(見圖9-7)。

Double-margin float bug

這個bug 很輕易修復，將元素的display 屬性設置為inline 就行了.因為元素是浮動的，將display 屬性設置為inline 現實上不會影響顯示體例?？墒牵@似乎會阻止Windows 上的IE6和更低版本將所有空白地加倍。這是一個很是輕易發現和修復的bug : 每當對具有水平空白邊的元素進行浮動時，都應該很自然地將display 屬性設置為inline。

3像素文本偏移bug

p { margin-left: 200px; }

如不美觀這么做，在文本和浮動元素之間就會呈現一個莫名其妙的3像素間隙。(見圖9-8) 。

Figure Above: IE/Win 的雙空白浮動bug示意閣

Three-pixel text jog bug

Figure Above: IE 5-6/Win 的3像素文本偏移bug示意圖

CSS 開發人員最主要的手藝之一是發現常見瀏覽器bug的能力。經由過程體味導致這些bug 的各類元索，可以在它們造盤問題之前發現而且修復它們。

雙空白邊浮動bug

修復這個bug 需要雙管齊下。首先，給包含文本的元素設置肆意的高度。這會迫使元素擁有結構，這在概況上會消弭文本偏移。因為Windows 上的IE6和更低版本將height作為min-height那樣看待，所以設置一個小的高度并不會影響元素在這些瀏覽器巾的現實尺寸?？墒牵@會影響其他瀏覽器，所以要使用Holly招數對除了Windows 上的IE6 和更低版本之外的所有其他瀏覽器潛匿這個軌則，

.myFloat { float: left; width: 200px; }

/* Hide from IE5-Mac. title="IE 6 peek-a-boo bug" src="http://adamghost.com/wp-content/uploads/2009/03/image-thumb4.png" border="0" alt="IE 6 peek-a-boo bug" width="600" height="305" />



                Figure Above:IE 6的躲躲貓bug示意圖
相對容器中的絕對定位
我要談判的段后一個首要瀏覽器bug涉及相對定位容器中的絕對定位元素。在前面的章節中鈉揭捉
						 

							文章來源：攀枝花惠康網絡公司
							惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。