认识hasLayout——IE浏览器css bug的一大罪恶根源 转
什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。
下列元素默认 hasLayout=true
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>
很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。
hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。
-------------------------------------
display
启动haslayout的值:inline-block
取消hasLayout的值:其他值
--------------------------------------
width/height
启动hasLayout的值：除了auto以外的值
取消hasLayout的值：auto
---------------------------------------
position
启动hasLayout的值：absolute
取消hasLayout的值：static
----------------------------------------
float
启动hasLayout的值：left或right
取消hasLayout的值：none
---------------------------------------
zoom
启动hasLayout的值：有值
取消hasLayout的值：narmal或者空值
（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5 对这个属性不支持。）
----------------------------------------
writing-mode: tb-rl
这也是微软专有的属性。
ie7还有一些额外的属性可以触发该属性（不完全列表）：
min-height: (任何值)
max-height: (任何值除了none)
min-width: (任何值)
max-width: (任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)5
position: fixed
因元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见。举一个典型例子，当一个元素内含浮动或绝对定位的内容时，它通常会表现出奇怪和错误的行为，看下面的代码：
<div id="nofloatbox">
<div id="floatbox"></div>
</div>
CSS代码如下：
#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
}
#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}
ie显示结果如下图： 
可见无浮动的div并没有被里面的浮动元素的高度撑开，其高度并不会自动计算。我们下面再给这个无浮动的div加上个zoom:1;来触发其hasLayout属性试试，css代码如下：
#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
zoom:1;
}
#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}
保存刷新ie浏览器窗口，如下图：
可见这次外围容器的高度被撑起来了。
同样，设定上文所述的其他会触发hasLayout的css属性都会得到这个结果。
通常firefox等标准的遵守浏览器可以加上overflow: hidden;来解决，而IE则不行，需要触发其hasLayout属性才可以。
hasLayout对于内联元素也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。如下例：
代码：
<p>今天的<span style="width: 100px; height: 50px; background: #DDD;">天气</span>真好</p>
效果如下图所示：
下面给span加上zoom: 1;来触发hasLayout：
<p>今天的<span style="width: 100px; height: 50px; background: #DDD; zoom: 1;">天气</span>真好</p>
这回的效果如下图所示：
要注意的是，hasLayout是微软专有的东西，对firefox等比较遵守标准的浏览器就无效了，因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果，不知ie8是否已经弃用这个属性了？
其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。
一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。
参考：http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx
相关推荐
/* 触发hasLayout */ ``` 这里的`*display:inline`和`*zoom:1`组合，是为了解决IE6、7对display:inline-block的支持问题。`*`是IE的私有选择器，用于针对这些老版本的浏览器。 当元素使用display:inline-block时，...
需要注意的是，一旦一个元素触发了Haslayout，这个状态通常是不可逆的，除非将其样式恢复到初始状态，或者移除触发Haslayout的CSS属性。 解决Haslayout问题的关键在于识别并修复那些可能导致问题的样式。对于开发者...
在IE6中，为了触发hasLayout，还需要加上`*zoom:1`。这样，浮动元素会被包含在容器内部，容器的高度会自动扩展以适应浮动元素。优点是代码简洁，无结构和语义化问题，但可能在内容过多时导致溢出隐藏，影响用户体验...
默认开启hasLayout的元素包括表格相关元素、图像、输入控件等，而某些CSS属性如`position: absolute`和`float: left|right`也会触发hasLayout。当遇到与hasLayout相关的问题时，可以通过调整元素的CSS属性或使用条件...
可以通过设置CSS属性如width、height、display、float、position等来触发hasLayout。在某些IE显示问题中，通过调整hasLayout状态常能解决问题。 5. **图像格式的区别**： - **JPEG(JPG)**：不支持透明，适用于照片...
的元素），width和height在IE5.x、IE6或IE7的quirks模式下可以触发hasLayout，但在IE6的标准兼容模式下，内联元素会忽略width或height属性，因此设置这些属性不能使其具有布局。 值得注意的是，zoom属性总能触发...
可以通过设置 `zoom: 1` 来触发 hasLayout，或者使用 `overflow: hidden` 来解决相关问题。 - **Chrome/Safari/Firefox 等现代浏览器**：这些问题通常涉及 CSS3 特性，如 Flexbox、Grid 等。可以使用前缀（如 `-...
如果父级元素存在触发了hasLayout布局的元素或者经过定位的元素，那么`offsetParent`返回的是距离自身最近的经过定位或触发hasLayout的父级元素。 ```html ;"> <div id='test'></div> console.log(document....
更进一步，针对IE浏览器，尤其是IE7，可以通过触发hasLayout属性来模拟inline-block的效果。IE浏览器中的hasLayout是一个内部的、用于控制布局的特殊属性。一些元素（如input、img）会自然地拥有这个属性，而有些...
解决方法：为浮动元素添加`display: inline-block`或`zoom: 1`（触发hasLayout）可以解决IE6的双倍边距问题。 3. **透明度** - IE8及以下版本不支持`opacity`属性，但可以使用滤镜`filter: alpha(opacity=XX)`来...
`（触发hasLayout）来消除。 5. **hasLayout机制** IE6特有的hasLayout机制，当元素满足某些条件时，会自动计算其尺寸，可能导致布局问题。可以通过设置`width`、`height`、`zoom`等属性触发或避免hasLayout。 6....
/* 触发hasLayout */ } ``` 同时，不要忘记处理其他浏览器的兼容性，确保在非IE6浏览器中也能正常工作。可以使用条件注释或者`Modernizr`之类的库来检测浏览器版本，然后应用相应的CSS修复或补丁。 最后，压缩包...
此外，IE7及更高版本还有其他属性可以触发hasLayout，如设置`min-height`, `max-height`, `min-width`, `max-width`, `overflow`等。 五、图像格式的区别与应用场景 1. **JPEG(JPG)**：适用于高质量的连续色调图像...
/* 触发hasLayout */ } ``` 8. `min-height`问题 IE6不支持`min-height`，可以使用下划线`_` hack或`expression`表达式解决： ```css #element { min-height: 100px; /* 标准浏览器 */ _height: 100px; /* IE6 ...
可以通过设置元素的height、width或者使用zoom:1来触发hasLayout。有时，即使设置height:1%也能达到效果，即使元素的实际高度不变，也会拥有hasLayout属性。 5. **解决字符重复问题** - 当复杂的布局导致文字出现...
在IE7及更高版本中，还有其他属性可以触发haslayout，如min-height、max-height、min-width、max-width、overflow等。 五、图像格式的区别及应用场景 1. **JPEG（JPG）**：不支持透明，适用于照片或色彩丰富的图像...
即使不知道具体高度，也可以使用`height: 1%`来触发hasLayout，不影响元素实际高度，但使其具备hasLayout属性。 5. **字符重复问题**：在复杂布局中，浮动元素内的文本可能会出现在清除浮动的元素下方。为了解决这...
本文将深入探讨如何在遇到这类问题时，通过触发hasLayout来寻找解决方案。 首先，hasLayout是IE6和IE7特有的一个概念，它涉及到元素如何在页面上渲染，以及如何处理自身尺寸和内容。当一个元素"拥有layout"，它会...
/* 触发hasLayout */ } ``` 这里的`AlphaImageLoader`滤镜用于加载PNG图片，并通过`sizingMethod`参数调整图片大小。 2. 使用JavaScript库： 描述中提到可以通过引入JavaScript文件来解决这个问题，这种方法...
给`<div>`添加`zoom:1`可以触发hasLayout，有时这足以解决问题。 4. **使用负margin**：通过调整`<div>`的外边距（margin），可以尝试让`<div>`位置避开下拉菜单。 5. **JavaScript或jQuery修复**：如果以上方法都...