`
yxc_gdut
  • 浏览: 97417 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

overflow 触发IE7的hasLayout不能触发IE6的hasLayout

阅读更多

 

 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,编程的时候需要注意

 

  • 大小: 10.1 KB
  • 大小: 28.9 KB
分享到:
评论

相关推荐

    CSS实现两栏布局,左边固定,右边自适应的4种方法

    由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...

    DIV+CSS网页中IE和火狐兼容问题的整理

    解决方法:为浮动元素添加`display: inline-block`或`zoom: 1`(触发hasLayout)可以解决IE6的双倍边距问题。 3. **透明度** - IE8及以下版本不支持`opacity`属性,但可以使用滤镜`filter: alpha(opacity=XX)`来...

    在IE6,7中遇到未知的问题无法解决时可以尝试触发其layout

    另外,给元素添加`height: 1%`(霍莉破解,Holly hack)或`min-height: 0`(针对IE7)也能触发hasLayout。但是需要注意,`overflow: visible`可能会使`height: 1%`失效。 hasLayout的触发条件包括但不限于以下CSS...

    CSS haslayout 彻底了解

    的元素),width和height在IE5.x、IE6或IE7的quirks模式下可以触发hasLayout,但在IE6的标准兼容模式下,内联元素会忽略width或height属性,因此设置这些属性不能使其具有布局。 值得注意的是,zoom属性总能触发...

    hasLayout引发的CSS Bug表

    在IE6、IE7、IE8等版本的IE浏览器中,某些特定的CSS属性值会触发hasLayout,使元素拥有独立的布局能力。这些属性包括但不限于以下几点: 1. display: inline-block 2. height: 除了auto之外任何值 3. width: 除了...

    css浏览器兼容整理

    7. **div嵌套时,外层div高度不能自适应** - 当内部元素的高度超过外部div时,外部div不会自动扩展其高度。可以通过设置 `overflow: auto;` 或使用Flexbox来解决。 8. **div嵌套时y轴上外层div到内层div的距离的...

    前端标准在各浏览器中的差异

    - 不同版本的IE浏览器(如IE6、IE7、IE8等)在处理`hasLayout`特性上可能存在显著差异,这对于跨浏览器开发来说是一大挑战。 - 其他浏览器(如Firefox、Chrome、Safari等)遵循W3C的标准规范,但在实现细节上也会...

    ie6布局网页padding值加倍的解决方法

    /* 隐藏溢出内容,同时阻止触发hasLayout */ } ``` 通过设置`height: 0px`和`overflow: hidden`,我们可以避免`clear`元素触发`hasLayout`,从而防止`padding`值的加倍。这种方法在大多数情况下都能有效解决IE6的`...

    On having layout

    当某个元素触发了“hasLayout”,意味着该元素的行为将发生改变,包括但不限于内容显示方式、与其他元素的关系以及对用户事件的响应等。 ##### 触发“hasLayout”的条件 - **默认具有“hasLayout”的元素**:某些...

    IE与Firefox的CSS兼容大全

    `来触发IE的“hasLayout”特性。 11. **ul标签的默认样式**:Firefox默认给`ul`标签添加了`padding`,而IE只有`margin`。通过`ul{margin:0;padding:0;}`可以消除这些差异。 在处理这些兼容性问题时,建议使用CSS...

    浏览器兼容隙

    IE6/7对于overflow属性的支持不一致,可能导致内容溢出时不按预期隐藏或显示滚动条。 **解决方案**: - 使用`zoom:1`触发hasLayout来修复此问题。 - 或者通过设置明确的高度值来避免内容溢出。 #### 三、文档模式...

    hasLayOut与css属性的关系介绍

    7. **overflow**:设置`overflow`为除了`visible`之外的值(如`hidden`、`auto`或`scroll`)也能触发`hasLayOut`。 8. **字体大小**:当父元素的字体大小改变时,如果子元素的尺寸依赖于这个字体大小(如百分比单位...

    最全前端面试题-2.2(浏览器兼容问题篇-上百篇题集整理1个月).doc

    - **`hasLayout`机制**:IE6-7中,某些元素会触发`hasLayout`导致布局行为变化,通过调整布局方式或设置特定样式可以避免。 - **IE6的`z-index`无效**:在某些情况下,IE6的`z-index`不起作用,可以通过设置父元素...

    CSS高级应用技巧.pdf

    文档中提到了许多触发`hasLayout`的CSS属性,如设置元素的`width`和`height`为非`auto`值、应用`zoom: 1`(针对IE6)等方法。 6. **解决旧版IE浏览器的CSS问题** 文件还包含了一系列的解决办法,例如针对IE6和IE7...

    IE6下兼容性常见的几个问题与解决方法

    为了解决这个问题,可以触发父元素的hasLayout,通常通过添加zoom:1或者适当内边距来实现。 第七个问题,IE6的双边距bug,横向margin值会被放大两倍。使用display:inline可以修复这个问题,使元素不被视为块级元素...

    清除浮动.pdf

    3. **触发`hasLayout`(IE特有)**: - 在IE中,可以通过触发`hasLayout`机制来闭合浮动,比如设置`zoom: 1;`或指定宽度和高度。`hasLayout`是IE特有的,其他浏览器不支持。 4. **使用浮动**: - 让父容器也浮动...

    CSS haslayout学习

    它是IE浏览器渲染引擎中一个重要的内部属性,这一概念主要存在于IE6及IE7版本中,并且对其他浏览器渲染方式几乎没有影响。理解haslayout可以帮助开发者更好地解决IE浏览器下CSS布局所出现的各种问题。 Haslayout...

Global site tag (gtag.js) - Google Analytics