On having layout(2)

下列 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” 外的任意值 (MSDN) MS专有属性,无法通过校验。 不过 zoom: 1 可以临时用做调试。 writing-mode: tb-rl (MSDN) MS专有属性,无法通过校验。  

在 IE7 中,overflow 也变成了一个 layout 触发器:

overflow: hidden|scroll|auto 这个属性在之前版本 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” 之外的任意值 ./.  

以上结论借助 IE Developer Toobar 以及预先测试得出。

有关内联级别元素

对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素)

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 height 属性,所以设置 width 或 height 不能在此种情况下令该元素具有 layout。 zoom 总是可以触发 hasLayout,但是在 IE5.0 中不支持。

具有“layout” 的元素如果同时也 display: inline ,那么它的行为就和标准中所说的 inline-block 很类似了:在段落中和普通文字一样在水平方向和连续排列,受 vertical-align 影响,并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题,因为在别的浏览器中 display: inline 就是内联,不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

脚本属性 hasLayout

我们这里称 hasLayout 为“脚本属性”是为了和我们熟知的 CSS 属性相区别。

注意一旦一个元素拥有了 layout,就没有办法再将其设成 hasLayout = False 了。

hasLayout-property 可以用来检测一个元素是否拥有 layout:举个例子,如果它的 id 是“eid”,那么只要在 IE5.5+ 的地址栏里输入 javascript: alert(eid.currentStyle.hasLayout) 即可检测它的状态。

IE的 Developer Toolbar 可以实时检查一个元素的当前样式;如果 hasLayout 是 true ,那么它的值显示为 “-1”。 我们可以通过实时修改一个元素的属性将“zoom(css)”设置为“1”来触发 hasLayout 以便调试。

另外一个需要注意的是“layout”会影响脚本编程。如果一个元素没有“layout”,那么clientWidth/clientHeight 总是返回0。这会让一些脚本新手感到困惑,而且这和 Mozilla 浏览器的处理方式也不一样。不过我们可以利用这一点在 IE5.0 中检测“layout”:如果 clientWidth 是零那么这个元素就没有 layout。

CSS hacks

下面用于触发 haslayout 的 hack 已经经过 IE6 及以下版本测试。今后版本的IE有可能会对此做不同处理。如果新版本浏览器发布我们会重新整理这部分内容。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdfzg.html