IE中 Internet Explorer for Windows的私有概念,有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”,意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。
元素是否具有”layout”可能会引发如下的一些问题:
* IE 很多常见的浮动臭虫。
* 元素本身对一些基本属性的异常处理问题。
* 容器和其子孙之间的空白边重叠问题。
* 使用列表时遇到的诸多问题。
* 背景图像的定位偏差问题。
* 使用脚本时遇到的浏览器之间处理不一致的问题。
下列元素应该是默认具有 layout 的:
* <html>, <body>
* <table>, <tr>, <th>, <td>
* <img>
* <hr>
* <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
* <iframe>, <embed>, <object>, <applet>
* <marquee>
下列 CSS 属性和取值将会让元素获得 layout:
* position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
* float: left|right
由于 layout 元素的特性,浮动模型会有很多怪异的表现。
* display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它,这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。”inline-block行为”在IE中是可以实现的,但是非常与众不同: IE/Win: inline-block and hasLayout 。
* width: 除 “auto” 外的任意值
很多人遇到 layout 相关问题发生时,一般都会先尝试用这个来修复。
* height: 除 “auto” 外的任意值
height: 1% 就在 Holly Hack 中用到。
* zoom: 除 “normal” 外的任意值
IE专有属性。不过 zoom: 1 可以临时用做调试。
* writing-mode: tb-rl
MS专有属性。
* overflow: hidden|scroll|auto
在 IE7 中,overflow 也变成了一个 layout 触发器,这个属性在之前版本 IE 中没有触发 layout 的功能。
* overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性,尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。
* 另外 IE7 的荧幕上又新添了几个 haslayout 的演员,如果只从 hasLayout 这个方面考虑,min/max 和 width/height 的表现类似,position 的 fixed 和 absolute 也是一模一样。
* position: fixed
* min-width: 任意值
就算设为0也可以让该元素获得 layout。
* max-width: 除 “none” 之外的任意值
* min-height: 任意值
即使设为0也可以让该元素的 haslayout=true
* max-height: 除 “none” 之外的任意值
参考:
http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/
http://adamghost.com/2008/12/ie-haslayout-%E8%AF%A6%E8%A7%A3/
http://www.cnblogs.com/rubylouvre/archive/2010/12/11/1900826.html
分享到:
相关推荐
"Layout" 是 IE 的一个私有属性,并不是W3C标准。它决定了一个对象(就是一个标签div、li等)在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。 这个属性可以被一些css强制激活。一些...
但是,布局问题是许多IE显示bug的根源,所以理解这个概念以及它如何影响CSS对修复bug是有帮助的。 一、什么是haslayout haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中,...
一.hasLayout 是什么?hasLayout 与 BFC 有很多相似之处,但 hasLayout 的概念会更容易理解。在 Internet Explorer 中,元素使用“布局”概念...简而言之,hasLayout 只是一个 IE 下专有的属性,hasLayout 为 true 的元
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的...而这个属性只要在IE中才起作用,
hasLayout是一种只读属性,有两种状态 true/false,当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。 什么时候表明Haslayout = false? IE浏览器下的很多bug都是haslayout =
除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。 因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用...
Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等
当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout) 当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说,这意味着这个元素需要花更多的代价来维护自身和...
ie6,ie7的haslayout属性是个让人头疼的问题。在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果,...
由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
hasLayOut想必大家并不陌生,当设定某一元素的css属性,能够触发该元素的layOut布局,感兴趣的朋友可以了解下
zoom:设置或检索对象的缩放比例,触发IE浏览器的haslayout属性,解决浮动,margin重叠等一些问题。 语法: zoom:normal 参数: normal:使用对象的实际尺寸(默认值) number:用数字来定义缩放比例,不能出现负数, ...
前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式。...由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:
对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify 有时会省去很多开发的时间。 要想...