haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。可以理解为一个专有的属性。很多的ie下的css bug都与其息息相关，因此我们需要取消hasLayout或者触发hasLayout来调节在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

①默认触发hasLayout的html元素

  • body , html

  • table, tr, th, td

  • img

  • hr

  • input, button, file, select, textarea, fieldset

  • marquee

  • frameset, frame, iframe

  • objects, applets, embed

②触发hasLayout的条件

1
2
3
4
5
6
7
8
9
10
11
12
13
display: inline-block

height: (除 auto 外任何值)

width: (除 auto 外任何值)

float: (left 或 right)

position: absolute

zoom: (除 normal 外任意值)

writing-mode: tb-rl（专有属性）

IE7特有的触发Layout的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
min-height: (任意值)

min-width: (任意值)

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

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

overflow: (除 visible 外任意值，仅用于块级元素)

overflow-x: (除 visible 外任意值，仅用于块级元素)

overflow-y: (除 visible 外任意值，仅用于块级元素)

position: fixed

当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。