【hasLayout触发方式】和【hasLayout——IE中css bug的罪魁祸首】（转自：http://hi.baidu.com/oxid/blog/item/8481e6a28128b3a0caefd044.html 和 http://www.k6

【hasLayout触发方式】

 

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的hasLayout一直为true。
2. type为text、button、file或select的input的hasLayout一直为true。
3. 设置{position:absolute}的元素的hasLayout为true
4. 设置{float:left|right}的元素的hasLayout为true
5. 设置{display:inline-block}的元素的hasLayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
   1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
8. 设置了{writing-mode:tb-rl}的元素的hasLayout为true。
9. 元素的contentEditable的属性值为true。
10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

http://dancewithnet.com/2009/09/06/css-opacity/
http://striblog.com/?p=13
http://hi.baidu.com/lijing00333/blog/item/bbfdd21424f5535bf2de3267.html

【hasLayout——IE中css bug的罪魁祸首】

什么是hasLayout？

要想更好的理解css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。
通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为“haslayout = -1”。

什么情况下hasLayout不会出现？

一般情况都不会出现，当然除了下面罗列的默认具有hasLayout的元素和使用特定样式触发以外；
它会带来各种诡异表现，当你发现IE7-出现了一些不可思议的问题，首先要检查的就是是否是hasLayout在捣鬼；
hasLayout只出现在IE7及更早版本中，IE8不存在hasLayout解析模式，我们只讨论指定doctype的情况。

hasLayout的触发条件：

* position: absolute(IE5+)
* float: left|right(IE5+)
* display: inline-block(IE5+)
* width: “auto”以外的任何值(IE5+; 对inline元素无效)
* height: “auto”以外的任何值(IE5+; 对inline元素无效)
* zoom: “normal”以外的任何值(IE5.5+; IE私有属性)
* writing-mode: tb-rl(IE5+; IE私有属性)
* overflow: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不能应用在未触发hasLayout的元素上)
* overflow-x|-y: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不触发hasLayout; 此属性在CSS3中才获支持)
* min-width: 任何值(IE7; 即使是0)
* max-width: “none”以外的任何值(IE7)
* min-height: 任何值(IE7)
* max-height: “none”以外的任何值 (IE7)
* position: fixed(IE7)

清除或重置hasLayout：

* position: static(IE5+)
* float: none(IE5+)
* display: “inline-block”以外的任何值(IE5+)
* width|height: “auto”(IE5+; 对inline元素无效)
* zoom: “normal”(IE5.5+; IE私有属性)
* writing-mode: 从’tb-rl’到’lr-tb’(IE5+; IE私有属性)
* max-width|max-height: “none”(IE7)
* overflow: visible(IE7)

haslayout 问题的调试与解决

当网页在ff中表现正常，而在 IE7 或更早版本中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。
对于IE7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。
对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE的条件注释。