本文详细介绍了IE浏览器特有的hasLayout属性，解释了该属性的触发方式及其对CSS解析的影响。通过具体案例展示了如何解决IE下的兼容性问题。
文章一 ：
解决IE兼容问题是比较头疼的问题，无论你是新入门的菜鸟还是久经考验的职业行家，兼容问题，特别是IE，IE6会让你非常头疼。很多时候，div CSS在IE下的解析十分奇怪，一个比较经典的bug就是设置border的时候，有时候border会断开，刷新页面或者滚动滚动条的时候，断掉的部分又会连接起来。这些问题的根源很多时候来源于IE的一个特有属性：hasLayout。hasLayout是一个非常有意思的学术研究，如何深刻理解hasLayout属性，及他的使用方法，原理，解决IE的兼容问题非常有用处，下面来讲解一下hasLayout的属性，原理与使用方法。
这些诡异的问题往往大部分和IE下一个神秘的属性相关——hasLayout。hasLayout是IE浏览器专有的一个属性，用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现bug，其原因可能与hasLayout没有被自动触发有关，我们通过一些技巧，手动触发hasLayout属性就可以解决Bug了。这也算是针对IE下疑难杂症的特殊偏方了，很多时候，触发了hasLayout就可以药到病除了。
hasLayout的触发方法有很多种，例如设置width,height值，设置position为relative等。但如果设置了width,height,或position都会在触发hasLayout的同时带来一些副作用的。早期的一些工程师推荐使用“height:1%”来触发hasLayout，那时还没有出现IE7,而height属性在IE6下其实是按照"min-height"来解析的，所以只要对IE6进行hack,"* html{height:1%}"就可以触发hasLayout，同时又不带来副作用了。后来出现的IE7仍然存在很多hasLayout的问题，但IE7已经能够正确识别height属性了，“height:1%”的方法已经不再适用了。
于是，一个更好的解决方法开始流行，它使用了一个生僻的CSS属性zoom来触发hasLayout——"zoom:1"。使用"zoom:1"可以触发hasLayout，并且不会像height等属性一样引入副作用，更妙的是，我们可以不用CSS hack了。但"zoom:1"并不是一定可以触发hasLayout的。在极少数特殊的情况下，例如非常复杂的CSS设置，特别是使用DHTML的时候，使用"zoom:1"有时候也会无效，这时，我们可能需要借助更强大的"position:relative"来帮助触发hasLayout。总之，”zoom“是最常用，最安全，成本最少的触发hasLayout的方式，一般情况下，使用它就完全可以触发hasLayout了。如果遇到特殊情况，"zoom:1"无效的情况下，我们可以通过设置"position:relative"来触发hasLayout，尽管它会带来一点副作用。
值得强调的是，hasLayout的设计初衷是用于辅助块级元素的盒模型解析的，它是用于块级元素的。如果用于行内元素，会引发一些特殊的效果，就会让行内元素拥有一些块级元素的特性。
如：display:inline-block;它是行内的块级元素，它拥有块级元素的特点，可以设置长宽，可以设置margin和padding值，但它却不是独占一行的，它的宽度并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身，是个非常有用的display类型。
以上是hasLayout属性，原理与使用方法总结讲解一下，对于解决IE兼容问题帮助很大的，同学在平时做div+css的时候，要注意一下。
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）
当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout为只读属性 一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为“haslayout = -1”。
haslayout 问题的调试与解决
当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。
文章二：
|
哎，没办法，谁让咱国内市面上都是这种呲牙咧嘴的浏览器呢.....(关注IE678死亡速度) 查阅，翻读，摘抄，记录，再逐一实践，总结，终于对他这个臭毛病有了根源上的认识。 hasLayout！先上定义： 它是IE的特有属性。它决定着一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算组织内容。为了区别这两个概念，渲染引擎采用了hasLayout的属性，true或false，当属性为true时，我们说这个元素触发了布局(Layout)。 具有hasLayout属性的标签： <html>，<body><table>，<tr>，<td>，<td><img><hr><input>，<button>，<select>，<textarea>，<fieldset>，<legend><iframe>，<embed>，<object>，<applet><marquee>这个属性存在的意义？ 当一个元素对象的layout被激活时候，它和它的子元素的定位和尺寸计算将独立进行，也就是独立布局，因此浏览器会消耗更多的代价来处理拥有layout的元素。为了提高性能，IE整出了个这么个私有属性。 可触发hasLayout的CSS特性：
复制代码
代码如下:
display: inline-block height:（除了auto之外任何值） width:（除了auto之外任何值） float:（left || right） position：absolute writing-mode：tb-rl zoom:（除了normal之外任何值） IE7可触发hasLayout的CSS特性：
复制代码
代码如下:
min-height:（任意值） min-width:（任意值） max-height:（除none之外任意值） max-width:（除none之外任意值） overflow:（除visible之外任意值，仅用于块级元素） overflow-x:（除visible之外任意值，仅用于块级元素） overflow-y:（除visible之外任意值，仅用于块级元素） position:fixed 再来看看嘴歪眼斜的临床表现：（以下内容均本人亲测）
|
扫一扫
3319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
