overflow 能触发IE7的hasLayout 不能触发IE6的hasLayout
测试一下
<!DOCTYPE HTML>
<html>
<head>
<title>hasLayout属性</title>
<meta http-equiv="content-type" content="text/html; charset=GB18030">
<style type="text/css">
div{border:1px solid red;}
.hasLayout{overflow:auto;border:1px solid green;}
.log{margin-top:10px;border:1px solid #5EAFDE;height:200px;width:300px;}
</style>
</head>
<body>
<div class="hasLayout" id="a">
a
</div>
<div id="b">
b
</div>
<div id="log" class="log">
</div>
<script type="text/javascript">
var a = document.getElementById("a");
var b = document.getElementById("b");
//a.currentStyle.hasLayout属性显示该元素是否拥有布局
var a_hasLayout = a.currentStyle.hasLayout;
var b_hasLayout = b.currentStyle.hasLayout;
document.getElementById("log").innerHTML = "a.hasLayout:"+a_hasLayout+"\nb.hasLayout:"+b_hasLayout+
"\na.clientWidth:"+a.clientWidth+" a.clientHeight:"+a.clientHeight+"\nb.clientWidth:"+b.clientWidth+" b.clientHeight:"+b.clientHeight;
</script>
</body>
</html>
下面是IE6/7/8对比
说明：
1、元素的currentStyle.hasLayout属性显示该元素是否拥有布局
2、IE6/7中假如元素没有拥有布局，他们的clientWidth和clientHeight始终为0，编程的时候需要注意
相关推荐
由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
解决方法：为浮动元素添加`display: inline-block`或`zoom: 1`（触发hasLayout）可以解决IE6的双倍边距问题。 3. **透明度** - IE8及以下版本不支持`opacity`属性，但可以使用滤镜`filter: alpha(opacity=XX)`来...
另外，给元素添加`height: 1%`（霍莉破解，Holly hack）或`min-height: 0`（针对IE7）也能触发hasLayout。但是需要注意，`overflow: visible`可能会使`height: 1%`失效。 hasLayout的触发条件包括但不限于以下CSS...
SS兼容性问题在Web开发中始终是一大挑战，特别是针对IE浏览器，尤其是早期版本如IE6、IE7。本文主要探讨了几个常见的CSS在IE浏览器中的BUG及其解决方案。 1. **错误的扩展与min-height** - 在IE6中，设定`height`...
的元素），width和height在IE5.x、IE6或IE7的quirks模式下可以触发hasLayout，但在IE6的标准兼容模式下，内联元素会忽略width或height属性，因此设置这些属性不能使其具有布局。 值得注意的是，zoom属性总能触发...
在IE6、IE7、IE8等版本的IE浏览器中，某些特定的CSS属性值会触发hasLayout，使元素拥有独立的布局能力。这些属性包括但不限于以下几点： 1. display: inline-block 2. height: 除了auto之外任何值 3. width: 除了...
7. **div嵌套时，外层div高度不能自适应** - 当内部元素的高度超过外部div时，外部div不会自动扩展其高度。可以通过设置 `overflow: auto;` 或使用Flexbox来解决。 8. **div嵌套时y轴上外层div到内层div的距离的...
- 不同版本的IE浏览器（如IE6、IE7、IE8等）在处理`hasLayout`特性上可能存在显著差异，这对于跨浏览器开发来说是一大挑战。 - 其他浏览器（如Firefox、Chrome、Safari等）遵循W3C的标准规范，但在实现细节上也会...
/* 隐藏溢出内容，同时阻止触发hasLayout */ } ``` 通过设置`height: 0px`和`overflow: hidden`，我们可以避免`clear`元素触发`hasLayout`，从而防止`padding`值的加倍。这种方法在大多数情况下都能有效解决IE6的`...
当某个元素触发了“hasLayout”，意味着该元素的行为将发生改变，包括但不限于内容显示方式、与其他元素的关系以及对用户事件的响应等。 ##### 触发“hasLayout”的条件 - **默认具有“hasLayout”的元素**：某些...
`来触发IE的“hasLayout”特性。 11. **ul标签的默认样式**：Firefox默认给`ul`标签添加了`padding`，而IE只有`margin`。通过`ul{margin:0;padding:0;}`可以消除这些差异。 在处理这些兼容性问题时，建议使用CSS...
IE6/7对于overflow属性的支持不一致，可能导致内容溢出时不按预期隐藏或显示滚动条。 **解决方案**： - 使用`zoom:1`触发hasLayout来修复此问题。 - 或者通过设置明确的高度值来避免内容溢出。 #### 三、文档模式...
7. **overflow**：设置`overflow`为除了`visible`之外的值（如`hidden`、`auto`或`scroll`）也能触发`hasLayOut`。 8. **字体大小**：当父元素的字体大小改变时，如果子元素的尺寸依赖于这个字体大小（如百分比单位...
- **`hasLayout`机制**：IE6-7中，某些元素会触发`hasLayout`导致布局行为变化，通过调整布局方式或设置特定样式可以避免。 - **IE6的`z-index`无效**：在某些情况下，IE6的`z-index`不起作用，可以通过设置父元素...
文档中提到了许多触发`hasLayout`的CSS属性，如设置元素的`width`和`height`为非`auto`值、应用`zoom: 1`（针对IE6）等方法。 6. **解决旧版IE浏览器的CSS问题** 文件还包含了一系列的解决办法，例如针对IE6和IE7...
为了解决这个问题，可以触发父元素的hasLayout，通常通过添加zoom:1或者适当内边距来实现。 第七个问题，IE6的双边距bug，横向margin值会被放大两倍。使用display:inline可以修复这个问题，使元素不被视为块级元素...
3. **触发`hasLayout`（IE特有）**： - 在IE中，可以通过触发`hasLayout`机制来闭合浮动，比如设置`zoom: 1;`或指定宽度和高度。`hasLayout`是IE特有的，其他浏览器不支持。 4. **使用浮动**： - 让父容器也浮动...
它是IE浏览器渲染引擎中一个重要的内部属性，这一概念主要存在于IE6及IE7版本中，并且对其他浏览器渲染方式几乎没有影响。理解haslayout可以帮助开发者更好地解决IE浏览器下CSS布局所出现的各种问题。 Haslayout...