浅析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私有属性,不推荐用。