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...
的元素),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...