什么是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显示结果如下图：
认识hasLayout——IE浏览器css bug的一大罪恶根源 - neverned - neverned
可见无浮动的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——IE浏览器css bug的一大罪恶根源 - neverned - neverned
可见这次外围容器的高度被撑起来了。
同样，设定上文所述的其他会触发hasLayout的css属性都会得到这个结果。
通常firefox等标准的遵守浏览器可以加上overflow: hidden;来解决，而IE则不行，需要触发其hasLayout属性才可以。
hasLayout对于内联元素也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。如下例：
代码：
<p>今天的<span style="width: 100px; height: 50px; background: #DDD;">天气</span>真好</p>
效果如下图所示：
认识hasLayout——IE浏览器css bug的一大罪恶根源 - neverned - neverned
下面给span加上zoom: 1;来触发hasLayout：
<p>今天的<span style="width: 100px; height: 50px; background: #DDD; zoom: 1;">天气</span>真好</p>
这回的效果如下图所示：
认识hasLayout——IE浏览器css bug的一大罪恶根源 - neverned - neverned
要注意的是，hasLayout是微软专有的东西，对firefox等比较遵守标准的浏览器就无效了，因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果，不知ie8是否已经弃用这个属性了？
其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。
一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的 haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。
分享到：
相关推荐
- **IE hasLayout**：许多 IE 的 CSS BUG 都与 hasLayout 有关。可以通过设置 `zoom: 1` 来触发 hasLayout，或者使用 `overflow: hidden` 来解决相关问题。 - **Chrome/Safari/Firefox 等现代浏览器**：这些问题通常...
本文将详细探讨由IE浏览器特有的hasLayout属性引发的CSS Bug表，涉及的知识点包括hasLayout的定义、特点、触发条件以及具体的Bug案例和解决方案。为了便于理解，我们将分几个部分阐述这些知识点。 首先，hasLayout...
在IE浏览器中，CSS的`haslayout`属性是一个独特的概念，它是Windows Internet Explorer渲染引擎的内部机制，主要用于控制元素的尺寸和定位。由于IE浏览器在处理页面布局时存在一些与众不同的行为，`haslayout`成为了...
SS兼容性问题在Web开发中始终是一大挑战，特别是针对IE浏览器，尤其是早期版本如IE6、IE7。本文主要探讨了几个常见的CSS在IE浏览器中的BUG及其解决方案。 1. **错误的扩展与min-height** - 在IE6中，设定`height`...
不论是6、7还是8，它们都有一个共同的渲染标准haslayout，所以haslayout 是一个非常有必要彻底弄清除的概念。大多 数IE下的显示错误，就是源于它。 什么是Layout呢？"Layout" 是 IE 的一个私有属性，并不是W3C标准。...
在IT行业中，尤其是在Web开发领域，IE（Internet Explorer）浏览器的兼容性问题一直是开发者们面临的一大挑战。由于IE的历史悠久，且不同版本间存在诸多差异，导致许多现代Web技术在旧版IE上运行不顺畅。以下是一些...
标题“bootstrap兼容IE6的css”表明我们要解决的是使Bootstrap在这些老版本的IE浏览器中正常工作的技术问题。 在进行Bootstrap与旧版IE兼容性开发时，主要涉及以下几个关键知识点： 1. **CSS Hack**: 由于不同...
微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了layout ,也就是hasLayout.下面我们便一起来深入解析IE浏览器专有的CSS属性hasLayout
在IE浏览器中，如果一个元素设置了`float`且拥有外边距，则该元素的右边距可能出现双倍的情况。 **解决方法：** - 通过特定于IE的CSS hack来解决此问题，例如： ```css *html #left { margin-right: -3px; } `...
此外，IE低版本对CSS选择器的支持也有局限，如：伪类`:hover`、`:first-child`在IE6中不起作用，需要使用JavaScript进行补偿。还有，IE6不支持CSS `display:none`，需要使用`visibility:hidden`代替。 布局方面，IE...
这份“IE6, IE7, IE8 CSS 兼容速查表”就是为了解决这一问题而编写的，它提供了关于这些浏览器中CSS特性的详尽对比和解决方案。 1. **CSS盒模型差异**：IE6、7采用了独特的盒模型，其中`width`属性包含了边框和内...
在其他非IE浏览器如Firefox、Chrome、Safari等中，`zoom` 并不是一个标准的CSS属性，因此不被支持。然而，尽管其非标准性，`zoom` 在处理特定的IE浏览器布局问题时仍然具有重要作用。 `zoom` 的基本用法是将一个...
总结来说，解决IE浏览器中的CSS兼容性问题，需要掌握一整套针对IE浏览器的“Hacking Rules”，包括条件注释、特殊的选择器前缀、使用特定的CSS属性值等技巧。了解这些问题和解决方案，可以帮助前端开发者更好地在...
在Web开发中，CSS（层叠样式表）是实现网页美观设计的关键技术之一，但不同浏览器对CSS的支持程度和解析方式存在差异，这往往导致CSS bug的出现。了解这些bug并掌握相应的解决策略，对于提升网页的兼容性和用户体验...
然而，随着IE浏览器市场份额的下降和现代浏览器对标准的更好支持，这些技术逐渐被CSS预处理器（如Sass、Less）和特性检测库（如Modernizr）取代，以更优雅的方式处理浏览器兼容性问题。 在提供的文件列表中，有一个...
例如，通过在CSS规则中加入特定条件注释（条件注释只能在IE浏览器中识别），可以为IE6和IE7指定特定的样式规则，如： ```css #element { min-height: 20em; height: auto !important; height: 20em; /* IE only */...
本文将深入探讨针对IE6的一个常见问题——透明效果的实现及其相关的修复策略。 首先，让我们理解什么是透明效果。在现代Web设计中，透明或半透明效果是创建美观、交互式用户界面的重要组成部分。它们可以通过CSS的`...