低版本IE中CSS的bug之源“haslayout”

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么本身对自身的内容进行计算大小和组织，要么依赖于父元 素来计算尺寸和组织内容。为了调节这两个不一样的概念，渲染引擎采用了 hasLayout 的属性，属性值能够为true或false。当一个元素的 hasLayout属性值为true时，咱们说这个元素有一个布局（layout）

要想更好的理解 css， 尤为是 IE 下对 css 的渲染，haslayout 是一个很是有必要完全弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。若是它设置成了true，它就不得不去渲染它本身，所以元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单 词，若是haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是不少的ie bugs诞生的地方。

当一个元素有一个布局时，它负责对本身和可能的子孙元素进行尺寸计算和定 位。简单来讲，这意味着这个元素须要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工做。所以，一些元素默认会有一个布局。当咱们 说一个元素“拥有layout”或“获得layout”，或者说一个元素“has layout” 的时候，咱们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个“layout元素”能够是一个默认就拥有 layout 的元素或者是一个经过设置某些 CSS 属性获得 layout的元素。经过 IE Developer Toolbar 能够查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，一般显示为“haslayout = -1”。

负责组织自身内容的元素将默认有一个布局，主要包括如下元素（不彻底列表）：

* body and html

* table, tr, th, td

* img

* hr

* input, button, file, select, textarea, fieldset

* marquee

* frameset, frame, iframe

* objects, applets, embed

对于并不是全部的元素都默认有布局，微软给出的主要缘由是“性能和简洁”。若是全部的元素都默认有布局，会对性能和内存使用上产生有害的影响。

如何激发 haslayout？

大部分的 IE 显示错误，均可以经过激发元素的 haslayout 属性来修正。能够经过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。以下所示，经过设置如下 css 属性便可。

* display: inline-block

* height: (任何值除了auto)

* float: (left 或 right)

* position: absolute

* width: (任何值除了auto)

* writing-mode: tb-rl

* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不彻底列表):

* min-height: (任意值)

* max-height: (除 none 外任意值)

* min-width: (任意值)

* max-width: (除 none 外任意值)

* overflow: (除 visible 外任意值)

* overflow-x: (除 visible 外任意值)

* overflow-y: (除 visible 外任意值)

* position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器普遍支持。

对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于IE6，若是浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，因此设置 width 或 height不能在此种状况下令该元素具备 layout。

对 IE7 来讲，最好的方法是设置元素的最小高度为 0 (min-height:0;)。

haslayout 问题引发的常见 bug:

E6 及更低版本的双空白边浮动 bug

bug 修复: display:inline;

IE5-6/win 的 3 像素偏移 bug

bug 修复: _height:1%;

IE6 的躲躲猫(peek-a-boo) bug

bug 修复: _height:1%;

IE6/7负margin隐藏Bug：

bug 修复:去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;

须要注意的是，hasLayout属性是微软特有的过期属性，在IE八、IE9中，hasLayout属性已经被废弃。上文中的InternetExplorer都是指IE七、IE6及如下版本。