既是安安

蝴蝶飞不过沧海,谁忍心责怪?

拥有布局 IE haslayout

我们都知道浏览器有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

布局概念是Windows 上的I E 特有的,而且它不是CSS 属性.尽管某些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 上的IE 6 和更低版本巾,如果段落拥有布局(例如,由于设置了高度).那么它就被限制为矩形,因此阻止文本国绕浮动元素〈见图).

Text float in ie and other browers

Figure Above: 期望文本围绕相邻的浮动元素,但是,在IE/Win上,如果文本元素拥有布局,就不会这样显示。

这会导致浮动布间的各种问题更糟的是,许多人使用IE 作为主浏览器,他们会俯误地认为这才是正确的表现,在其他浏览器以不同方式处理泞-动元素时,他们反而会这必不解.

另-个问题涉及拥有布局的元素如何确定自己的尺,如果元亲的内容变得比元素本身大,那么期望元素流出到元素外.但是,在Windows 上的IE 6 和更低版本中,拥有布局的元素会销误地扩展以便适应内容的尺寸(见圈).

content flow in ie and other browers

Figure Above: 拥有布局的错误的扩展以便适应内容

这意味IE/Win中的width 实际上更像min-width. 这种行为也是在IE/Win中许多浮动布局被破坏的原因。当浮动框的内容错误地迫使框的宽度增加时,框对于可用空间来说太大了,因此下降到其他浮动元素在下面.

其他问题包括:

  • 拥有布局的元素不进行收缩。
  • 布局元亲对浮动进行自动消理。
  • 相对定位的元素不获得布局。
  • 在拥有布局的元素之间空白地不叠加。
  • 在不拥有布局的块级链接上,单击区域只覆盖文本。

在下一节中,我们将讨论一些最常见的浏览器bug. 你会注意到对于Windows 上的IE的许多修复方法都涉及通过设置属性迫使元素拥有布局。实际上,如果遇到一个IE/Wi n bug,首先应该做的事情之一就是尝试通过应用规则迫使元崇拥有布局。看看这是否可以修复问题。

如果希忘进一步了解IE的内部hasLayout属性,我建议阅读IE layout详解这篇文章。

[既是安安]博客 季氏安安

本文作者:季氏安安[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接,谢谢。)

原文链接:http://www.jsann.com/post/with_the_layout_of_ie_haslayout.html

网站分类
Tags列表
最近发表
最新留言
友情链接
站点统计

Top