IE6 布局

理解 hasLayout

许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout。简要的说，在给元素定义具体的尺寸（如height或width）就会触发hasLayout，在IE6下缺失或触发hasLayout会导致一些bug。

IE6 盒模型

如果怪异模式（quirks mode）在IE6中启用，IE6将会使用微软旧版的盒模型：width是元素的实际宽度，内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的办法是申明正确的文档类型以避免触发怪异模式，或者避免给有border或padding的元素定义width属性。当然你也可以考虑使用条件注释。

盒子模型

可以看出，IE6 盒子模型中，盒子的尺寸包含了 内容区，padding， border 和 margin 这四个部分，而 W3C 的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外。

在W3C标准中，HTML元素的宽度和高度等于元素内容的宽度和高度，除了IE之外，所有的浏览器都在怪癖模式和标准模式里使用这一规则。然而，IE却依然在怪癖模式里采用传统的盒子模型（如图3-1所示），在传统盒子模型中，HTML元素的宽度和高度等于元素外部的宽度和高度。元素的外部包括元素的内边距（padding）和边距（border）。

双边距Bug

当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。给元素添加display:inline;




/*IE6下将产生双倍边距*/
.floatedEl {float:left; margin-left:100px;}
 
/*修正*/
.floatedEl {float:left; margin-left:100px; display:inline;}

3像素间距bug

在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔，