转载:On having layout(2)

  在 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有可能会对此做不同处理。如果新版本浏览器发布我们会重新整理这部分内容。

  John Gallant 和 Holly Bergevin 在2003年发布的 Holly hack

/* \*/ * html .gainlayout { height: 1%; } /* */ 可以让 IE5+ 的任意元素获得 layout,除了标准兼容模式 IE6 中的内联元素。 一般都很有效,除了在某些极少情况下,需要用 height:0 或者 1px 更好一些。 和 overflow: hidden 不相容,除非在 IE6 的标注兼容模式下(因为这时如果父元素没有定高,那么height: 1% 会被变回 height: auto)。

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

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