IE的haslayout是个很纠结的东西，掌握好CSS就得掌握好它。初学CSS时走了很多弯路，以下几篇文章在我的学习中起了很大的作用，希望能让大家受益。
拥有layout概述
Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32]，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。
“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。
微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的体会甚至解决方案。
拥有layout的定义
一个元素”得到 layout”，或者说一个元素”拥有 layout” 的时候，是指它的微软专有属性 hasLayout 为此被设为了 true 。一个”layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。
而”无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个”无layout祖先”。
给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ， 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除或重置。
拥有layout的各种问题
Layout 在显示盒模型时有着不同寻常而且难以预料的效果，而且有时甚至会牵连到他们的子元素。
一个元素是否具有”layout”可能会引发如下的一些问题（包括但不限于）：
* IE 很多常见的浮动臭虫。
* 元素本身对一些基本属性的异常处理问题。
* 容器和其子孙之间的空白边重叠问题。
* 使用列表时遇到的诸多问题。
* 背景图像的定位偏差问题。
* 使用脚本时遇到的浏览器之间处理不一致的问题。
Layout 的由来
不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。
下列元素应该是默认具有 layout 的：
* <html>, <body>
* <table>, <tr>, <th>, <td>
* <img>
* <hr>
* <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
* <iframe>, <embed>, <object>, <applet>
* <marquee>
下列 CSS 属性和取值将会让一个元素获得 layout：
* position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
* float: left|right
由于 layout 元素的特性，浮动模型会有很多怪异的表现。
* display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。”inline-block行为”在IE中是可以实现的，但是非常与众不同： IE/Win: inline-block and hasLayout 。
* width: 除 “auto” 外的任意值
很多人遇到 layout 相关问题发生时，一般都会先尝试用这个来修复。
* height: 除 “auto” 外的任意值
height: 1% 就在 Holly Hack 中用到。
* zoom: 除 “normal” 外的任意值
IE专有属性。不过 zoom: 1 可以临时用做调试。
* writing-mode: tb-rl
MS专有属性。
* overflow: hidden|scroll|auto
在 IE7 中，overflow 也变成了一个 layout 触发器，这个属性在之前版本 IE 中没有触发 layout 的功能。
* overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。
* 另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。
* position: fixed
* min-width: 任意值
就算设为0也可以让该元素获得 layout。
* max-width: 除 “none” 之外的任意值
* min-height: 任意值
即使设为0也可以让该元素的 haslayout=true
* max-height: 除 “none” 之外的任意值
有关内联级别元素
对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素)
* width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
* zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。
具有”layout” 的元素如果同时也 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。
重置 hasLayout
在另一条规则中重设以下属性为默认值将重置(或撤销)hasLayout，如果没有其他属性再添加 hasLayout 的话：
* width, height (设为 “auto”)
* max-width, max-height (设为 “none”)(在 IE 7 中)
* position (设为 “static”)
* float (设为 “none”)
* overflow (设为 “visible”) (在 IE 7 中)
* zoom (设为 “normal”)
* writing-mode (从 “tb-rl” 设为 “lr-t)
display 属性的不同：当用”inline-block”设置了 haslayout = true 时，就算在一条独立的规则中覆盖这个属性为”block”或”inline”，haslayout 这个标志位也不会被重置为 false。
把 mid-width, mid-height 设为它们的默认值”0″仍然会赋予 hasLayout，但是 IE 7 却可以接受一个不合法的属性”auto”来重置 hasLayout。
分享到：
相关推荐
文件名`iecss3`可能包含的是一个解决IE圆角问题的CSS3兼容库或者是一些示例代码，它可能通过CSS滤镜或者其他技术帮助开发者在IE浏览器上实现圆角效果。使用这类资源可以帮助开发者节省时间并确保在不同浏览器中的...
1. **理解浏览器差异**：首先要明白，Internet Explorer（尤其是早期版本如6、7和8）对CSS标准的实现与Firefox等其他现代浏览器有所不同，这包括对盒模型、浮动、透明度、渐变、边距塌陷等方面的处理。 2. **盒模型...
在深入探讨IE浏览器的haslayout属性及其兼容性问题之前，我们首先要理解什么是haslayout。haslayout是Internet Explorer（IE）浏览器特有的一个概念，它决定了一个HTML元素如何在页面上渲染，包括其尺寸、位置以及对...
总之，在IE6下实现类似新浪微博头部的固定定位是一项挑战，需要结合`expression`、`iframe`、`hasLayout`等技术，并注意性能和兼容性的优化。通过不断实践和调试，我们可以使老旧的浏览器也能呈现出接近现代浏览器的...
- **浮动元素清除**：IE6/7的浮动元素清除有时需要特别处理，如使用`hasLayout`特性或额外的清除元素。 - **绝对定位**：IE与现代浏览器在处理绝对定位时可能存在差异，需要调整`z-index`和`position`属性以达到...
本文将深入探讨针对IE6的一个常见问题——透明效果的实现及其相关的修复策略。 首先，让我们理解什么是透明效果。在现代Web设计中，透明或半透明效果是创建美观、交互式用户界面的重要组成部分。它们可以通过CSS的`...
开发者可能需要借助`zoom:1`触发hasLayout来实现类似效果。 7. **CSS3选择器** IE7不支持许多CSS3选择器，如`nth-child()`、`nth-of-type()`等，而IE8在标准模式下支持了一部分，但不全面。这需要开发者在编写CSS...
IE6不支持PNG24位的透明效果，但可以通过CSS滤镜（`filter:progid:DXImageTransform.Microsoft.AlphaImageLoader`）来实现，或者转换为PNG8格式并使用Alpha透明通道。 4. **双边距问题** 当元素设置为`display:...
标题中的“IE下css if条件”指的是在Internet Explorer（IE）浏览器中，由于CSS标准的不完全支持，开发者经常需要使用一些特殊的技巧来实现特定...如果能访问这个文件，将有助于进一步学习和理解IE下的CSS Hack实践。
IE6和IE7对CSS的支持有限，因此，创建能在这些浏览器中正常工作的下拉菜单需要一些特殊的技巧，比如使用`hasLayout`概念、条件注释以及CSS Hack等。 接着是"menulist.html"。这个文件可能包含一个带有二级栏目的...
### IE特有Bug知识点解析 #### 一、概述 Internet Explorer（简称IE）...通过以上详尽的分析和解决方案，开发者可以更好地理解和处理IE浏览器特有的兼容性问题，从而提高网站在不同浏览器环境下的兼容性和用户体验。
10. **XDomainRequest**：IE8至IE10使用XDomainRequest对象实现跨域请求，IE11及更高版本和现代浏览器使用XMLHttpRequest或fetch API。在处理跨域请求时，需特别关注这一差异。 11. **Box Model**：IE的盒模型计算...
在实际开发中，还需要注意其他一些CSS属性，如`hasLayout`、`zoom`、`filter`等，它们在IE中也有独特的行为。解决这些问题通常需要对浏览器的解析机制有深入的理解，并掌握一些CSS Hack技巧，如条件注释、星号前缀等...
对于IE6，可能还需要使用`hasLayout`属性，这是一个IE特有的概念，用来触发元素的自绘行为。 最后，JavaScript部分可能会包含添加事件监听器的代码，以便在鼠标进入或离开菜单项时显示或隐藏下级菜单。对于IE6，...
总的来说，为了实现良好的浏览器兼容性，开发者需要对各个浏览器的特性有深入理解，并使用适当的技巧和工具来编写跨浏览器的代码。随着技术的发展，IE6的使用逐渐减少，但对Firefox和其他旧版本浏览器的兼容仍需重视...
【IE6兼容性问题及其解决策略】 在互联网发展初期，Internet Explorer 6（简称IE6）曾是最广泛使用的浏览器之一，...尽管现代浏览器已占据主导地位，但考虑到一些老用户的使用习惯，理解并解决IE6的问题仍然是必要的。
总的来说，解决IE浏览器的CSS兼容性问题需要对这些特有bug有深入理解，并能灵活运用各种hack和技术。尽管现代浏览器已经减少了这些问题，但在维护旧项目或考虑跨浏览器兼容性时，这些知识仍然是至关重要的。
首先，我们要理解浏览器之间的差异主要源于对CSS标准的实现不一致。例如，IE常常遵循其自己的盒模型，而Firefox等现代浏览器遵循W3C的标准盒模型。这就导致了元素宽度和边距计算的不同，可能会影响整体布局。 1. 盒...
然而，由于不同的浏览器对CSS规范的实现存在差异，特别是Internet Explorer（IE）与Firefox，开发者常常面临兼容性问题。本文将深入探讨解决CSS在IE和Firefox之间兼容性问题的一些关键技巧。 首先，理解盒模型差异...