`
yxc_gdut
  • 浏览: 95922 次
  • 性别: 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...

    详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    前言 其实在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。...所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。 我们在重构页面的时候经常会使用到一个大

    详解IE浏览器的haslayout属性及相关兼容性问题解决

    不论是6、7还是8,它们都有一个共同的渲染标准haslayout,所以haslayout 是一个非常有必要彻底弄清除的概念。大多 数IE下的显示错误,就是源于它。 什么是Layout呢?"Layout" 是 IE 的一个私有属性,并不是W3C标准。...

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

    在IE6,7中如果发现某个异常不知道如何解决的时候可以尝试着触发其haslayout: 鄙人不才,今天也遇到了一个bug尝试了很多方法,最终在整个父类加上一个height:1%,然后顺利解决。 复制代码代码如下: height:1% ...

    如何解决IE6/IE7不识别display:inline-block属性

    ie6,ie7的haslayout属性是个让人头疼的问题。在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果,...

    inline-block 前世今生1

    同时我们知道 IE6、7 中 display:inline-block 是可以触发 hasLayout 的,触发了 hasLayout的元素表现出来的特征就是一

    使用zoom解决IE6 margin无效BUG

    IE6 margin无效的bug, 解决方法有很多。 其中有个解决办法之一。 看代码: 复制代码代码如下: &lt;div xss=removed&gt;some contents&lt;/div&gt; 在一些情况下IE6会无效,解决办法是下面的方式。...触发IE浏览器的haslayout

    也谈谈罪恶的Haslayout haslayout解决之道

    顾名思义,它的意思就是 — has layout,是IE下的特有属性,通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -...

    IE浏览器专有css属性之zoom详解

    Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等

    CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。 Zoom的使用方法: zoom : normal | number normal : 默认值。使用对象的实际尺寸 number : 百分数 | 无符号...

    深入解析IE浏览器专有的CSS属性hasLayout

    一.hasLayout 是什么?hasLayout 与 BFC 有很多相似之处,但 hasLayout 的概念会更容易理解。在 Internet Explorer 中,元素使用“布局”概念...简而言之,hasLayout 只是一个 IE 下专有的属性,hasLayout 为 true 的元

    在IE浏览器下出发CSS的haslayout属性

    因为布局是专门针对显示引擎内部工作方式的概念,所以一般情况下不需要了解它。但是,布局问题是许多IE显示bug的根源,所以理解这个概念以及它如何影响CSS对修复bug是有帮助的。 一、什么是haslayout haslayout是...

    IE 元素默认高度研究

    序号 HTML IE&lt;=7 CSS样式 表现: 实际高度 (px) 说明 1 &lt;div&gt;&lt;/div&gt; ...触发haslayout 3 &lt;div&gt;&lt;/div&gt; height:1px; 0 4 &lt;div&gt;&lt;/div&gt; overflow:hidden; 15 触发haslayout  

    CSS haslayout 彻底了解

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误,就是源于 haslayout。

Global site tag (gtag.js) - Google Analytics