详解ie中的haslayout属性

最新推荐文章于 2018-02-25 21:04:24 发布

one_327

最新推荐文章于 2018-02-25 21:04:24 发布

阅读量488

点赞数

文章标签： css haslayout ie bug html

本文链接：https://blog.csdn.net/one_327/article/details/53734997

版权

第一点，我们要知道什么是haslayout属性？

haslayout是微软Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，会使用布局的概念来定位元素的尺寸和位置。

但是这样在ie中会导致很大的性能问题，ie团队为了减少性能的开销，决定将布局只应用在需要它们的元素上。

也就是说默认情况下，每个元素都应该有它自己的样式，但是在ie中有些元素的样式并没有激发出来，所以ie浏览器的bug很多。对于这些bug，只要我们将他的haslayout属性激发出来，就可以解决了。

haslayout有两个属性值true和false，为true的时候haslayout被激发，我们就可以说这个元素有一个布局。当一个元素有布局的时候，它就负责对自己和子孙元素进行尺寸的计算和定位。haslayout为只读属性，一旦触发就不可逆转。那么，如何检测haslayout是否被触发呢？通过IE Developer Toolbar可以查看IE下HTML元素是否拥有haslayout，在IE Developer Toolbar下，拥有haslayout的元素，通常显示为“haslayout = -1”。

第二点，默认拥有haslayout的属性：

第三点，如何触发haslayout属性：

display

启动haslayout的值:inline-block

取消hasLayout的值:其他值

width/height:

启动haslayout的值:数值(除了auto的任意值)

取消hasLayout的值:auto

( 对 IE6 及更早版本来说很常用，该方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。但是要注意，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。)

position:

启动haslayout的值:absolute

取消hasLayout的值:static

float:

启动haslayout的值:left/right

取消hasLayout的值:none

zoom:

启动haslayout的值:数值

取消hasLayout的值:normal/空值

（ie私有属性）

ie7还有一些额外的属性可以触发该属性（不完全列表）：

min-height: (任何值)

max-height: (任何值除了none)

min-width: (任何值)

max-width: (任何值除了none)

overflow: (任何值除了visible)

overflow-x: (任何值除了visible)

overflow-y: (任何值除了visible)

position: fixed

第四点：发现和引用：

因元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见，比如含浮动或者绝对定位子元素的容器高度会塌陷，在ie6/ie7下我们为其添加zoom：1属性就触发了haslayout，从而修复高度塌陷的问题;再比如，我们经常会碰到ie6和ie7同时出现的bug，这个时候可以考虑是否源于 haslayout，可以添加一些可以触发haslayout的属性来解决。