浅析CSS中的haslayout

作为一名web开发人员，最大的希望不是自己的水平有多高，而是希望浏览器厂家能够统一标准，相信任何一个只要是接触过web程序开发的人员都有那样的感受，就是浏览器之间的兼容性问题总是让我们的工作平添诸多的麻烦，就拿一个简单的ajax来说，IE和DOM之间的获得ajax对象的方式就有很多的差别，还有就是有一些的效果在某些浏览器上面根本就得不到很好的支持，从而造成了混乱以及重复累赘的工作。下面我们要讲述的haslayout就是IE的特殊产物。

首先明确一个概念，haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout），但是现在哦haslayout在IE8以及后面更高的版本中取消了，其只针对IE8一下的版本有效。

为什我们要提到haslayout呢？它究竟有什么作用呢？我们知道只有当一个元素有了haslayout属性之后，他才可以对自身以及对其子元素的尺寸和定位进行计算的能力，就是说如果它的其中一个子元素有自己的定位的话，这个子元素就将负责计算自己以及自己子元素的尺寸，但是这个子元素的定位将受到其父元素的影响。

还有一些元素他们拥有自己特有的长和高，即使没有定义他们的长和高，比如说button，inputs等等，这就说明他们与生俱来的haslayout属性，既然有元素是与生俱来的，那肯定与之对应的就是我们的后天形成了，这里就要提到通过我们后天设置一些特别的css样式来触发layout，当然这个就像我们的炸弹一样，一旦触发就不可能修改。这些元素包括div span等。

这里如果拥有了layout之后，这些元素就被限制在了一个独立的盒子中了，这一点和我们的bfc很像，通过这样，我们的元素就不会影响到外部的元素，而自身也不会受到外部元素的影响。这就是所谓的一旦有了layout就触发了bfc，将自己锁起来了。这样也有一个弊端，就是被锁起来之后，该元素就无法自适应了，也不会适应别的元素，于是乎就可能产生一些怪异现象，甚至影响整个的布局。

下面将介绍一些重置haslayout的方法，

　　* width , height ( 设为 auto )

　　* max-width , max-height ( 设为 none ) [ IE7 ]

　　* position ( 设为 static )

　　* float ( 设为 none )

　　* overflow ( 设为 visible )

　　* zoom ( 设为 normal )

通过这些的话，可以重置我们的haslayout属性。还有一些就是怎么激活这个属性，下面将罗列一些常见的：

只需要将position: absolute设置绝对定位可能会引发新的问题。float: left|rightIE下的浮动也会产生一些莫名其妙的问题。display: inline-block当一个内联元素需要haslayout属性时就需要用它，但是IE本身不支持inline-block的，只是表现得像标准里说的inline-block。width: 除'auto'外的任意值优先考虑使用该属性。height: 除'auto'外的任意值对 IE6 及更早版本来说很常用，该方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。但是要注意，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。zoom: 除'normal'外的任意值又一个ie私有属性，不兼容标准。zoom:1可以在测试或者不追求标准的情况下使用，效果不错。writing-mode: tb-rlie私有属性，不推荐用。