【转载】拥有布局 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 作为主浏览器，他们会俯误地认为这才是正确的默示，在其他浏览器以分歧体例措置泞-动元素时，他们反而会这必不解.

结构概念是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)。

这个bug 很轻易修复，将元素的display 属性设置为inline 就行了.因为元素是浮动的，将display 属性设置为inline 现实上不会影响显示体例。可是，这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这是一个很是轻易发现和修复的bug : 每当对具有水平空白边的元素进行浮动时，都应该很自然地将display 属性设置为inline。

3像素文本偏移bug

如不美观这么做，在文本和浮动元素之间就会呈现一个莫名其妙的3像素间隙。(见图9-8) 。

Figure Above: IE/Win 的双空白浮动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" />