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

【hasLayout触发方式】 IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下： body、img、table、tr、th、td等元素的hasLayout一直为true。 type为text、button、file或select的input的hasLayout一直为true。 设置{position:absolute}的元素的hasLayout为true 设置{float:left|right}的元素的hasLayout为true 设置{display:inline-block}的元素的hasLayout为true 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true： IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。 元素在怪癖模式（compat mode）下。 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。 设置了{writing-mode:tb-rl}的元素的hasLayout为true。 元素的contentEditable的属性值为true。 在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的条件注释。