IE haslayout详解

Author : luckyGirl

要掌握好浏览器的兼容问题,IE无疑占据重要地位,虽然现在做的项目无需兼容IE6,但是IE6还是占据一定市场,做好IE6的兼容还是很有必要滴,在集合IE bug之前,首先了解一下IE的haslayout属性,许多IE的布局问题都是来源于它。

 
IE/Win的显示与其他浏览器不同的原因之一是,显示引擎使用一个称为布局(layout)的内部概念。

什么是layout

“Layout”是一个 Internet Explorer for Windows的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。
IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下,所有元素都控制自己的尺寸和定位。但是,这会在IE中导致很大的性能问题。因此,IE/Win 开发团队决定只将布局应用于实际需要它的那些元素,这样就可以充分地减少性能开销。
 

拥有layout的定义

一个元素”得到 layout”,或者说一个元素”拥有 layout” 的时候,是指它的微软专有属性 hasLayout 为此被设为了 true 。一个”layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。而”无layout元素”,是指 hasLayout 未被触发的元素,比如一个未设定宽高尺寸的干净 div 元素就可以做为一个”无layout祖先”。
在默认情况下拥有布局的元素包括:
  • body
  • 标准模式中的 html
  • table
  • tr, td
  • img
  • hr
  • input, select, textarea, button
  • iframe, embed, object, applet
  • marquee
设置以下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)

拥有layout的各种问题

Layout 在显示盒模型时有着不同寻常而且难以预料的效果,而且有时甚至会牵连到他们的子元素。

一个元素是否具有”layout”可能会引发如下的一些问题(包括但不限于):
  • IE 很多常见的浮动臭虫。
  • 元素本身对一些基本属性的异常处理问题。
  • 容器和其子孙之间的空白边重叠问题。
  • 使用列表时遇到的诸多问题。
  • 背景图像的定位偏差问题。
  • 使用脚本时遇到的浏览器之间处理不一致的问题。
 

haslayout 引起的bug及解决方案

1. 容器和其子孙之间的空白边重叠问题
最常见且最容易发现的bug 之一是IE6和更低版本中的双空白边浮动bug。

Solution:
将元素的display 属性设置为inline 就行了.因为元素是浮动的,将display 属性设置为inline 实际上不会影响显示方式。但是,这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这是一个非常容易发现和修复的bug,每当对具有水平空白边的元素进行浮动时,都应该很自然地将display 属性设置为inline。
 
2. 3像素文本偏移bug
另一个非常常见的I E 5-6/Win bug 是3像素文本偏移bug。当文本与2个浮动元素相邻时,这个bug 就会表现出来。例如,假设将-个元素向左浮动,并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边,其宽度等于浮动元素的宽度:
.myFloat { float: left; width: 200px; }
p { margin-left: 200px; }

如果这么做,在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙

Solution: 

最好将这些规则分别放进单独的浏览器特定的样式表中。如果这样做,用于Windows 上的lE 5.x的样式表如下:
p { height: 1%; margin-left: 0; }
img.myFloat { margin: 0 -3px; }

用于IE 6的样式表如下:
p { height: 1%; margin-left: 0; }
img.myFloat { margin: 0; }

 

 
相关文章:

拥有布局 IE haslayout
IE Haslayout 详解

standard

Have your say