堆叠，分层和 layout

IE/Win 中似乎有两种分层和堆叠顺序：

·一种是(伪)试图采用CSS的模式：Effect of z-index value to RP and AP blocks
·还有一种是由“hasLayout”及其孪生兄弟“contenteditable”的行为产生的堆叠顺序。正如在上面相对定位的例子中展现的那样，在 layout 影响下的堆叠现象就好像 Harry Houdini (译者注：魔术师，以纸牌魔术成名)的拿手戏法儿一样。

两种堆叠模式虽互不相容，但却共存于IE的渲染引擎中。经验之谈：调试的时候，两种情况都要考虑到。我们可能会有规律地在下拉菜单或者类似的复杂菜单中看到相关问题，因为它们往往牵涉到堆叠，定位和浮动等诸多令人头疼的问题。给那些 z-index 定位的元素 layout 是一种可能的修正方法，不过也不限于此，这里只是提醒一下。

混乱的 contenteditable

如果给一个 HTML 标签设定 contenteditable=true 属性，比如，将会允许对该元素以及其 layout 子元素进行实时的编辑、拖动改变尺寸等操作。你可以把这属性用在浮动元素或者一个有序列表中的 layout 列表元素上看看效果。
为了对元素进行操作(编辑它们)，“contenteditable”和“hasLayout”为那些 hasLayout 返回 true 的元素引入了一套单独的堆叠顺序。
Editing Platform 继承了 layout 概念，对 layout 的误解多是因 contenteditable 而起即可作为证明(那些某种程度上集成了IE编辑引擎的应用软件多暗含着对layout概念的某种强制向后兼容性)。

·More on contenteditable

和 CSS 规范类似的地方

你的 MSIE 页面在别的浏览器中一团糟？我们可没必要让这种事情发生。如果使用恰当，任何好的浏览器都能摆平 MSIE 的页面——只要你使用一些正确的 CSS。
利用 hasLayout 和“新的块级格式化范围”之间的细微相似之处，我们可以有几种方法在标准兼容浏览器中重新实现 hasLayout 的“包含浮动元素”效果，和一些“浮动元素旁边的元素”所特有的效果。

·Reverse engineering series
·Simulations

Quirks 模式

关于这种渲染模式的的信息，请参考我们的 quirks 模式 章节。

Layout ——结论

整个 layout 概念和一些基本 CSS 概念是不兼容的，即包含，排列，浮动，定位和层叠等。
由于页面中元素或有或没有 layout，会导致 IE/Win 的行为和 CSS 规范相违背。

拥有 layout ——另外一个引擎？

IE 的对象模型看起来是文档模型和他们传统的应用程序模型的糅合。我之所以提到这点是因为它对于理解IE如何渲染页面很重要。而从文档模型切换到应用程序模型的开关就是给一个元素“layout”。

　　　　　　　　　　　　　　　　　　　　　　　(Dean Edwards)

有时候要解释清楚某种行为是不可能的：就比如 hasLayout，会根据它的状态选择两种不同渲染引擎的一种使用，而且每一种都有其自己的 bug 和怪异之处。

不可消除的 bug

软件 bug 是由于在制作过程中对完整性和逻辑问题考虑不周等人为错误而导致的。这是人类的固有缺陷，目前还没有什么好的解决方法。
同样由于这种缺陷，任何试图不重写软件而修复 bug 的做法，都将会不可避免的导致软件中出现更复杂的bug。
所有依赖别的软件的软件——当然包括依赖操作系统，也会同样依赖他们的 bug。于是我们会从所有关联的软件中得到一连串的 bug，这也更说明找到一个无 bug 软件是几乎不可能的。

　　　　　　　　　　　　　　　　　　　　　　　(Molly, the cat‛)

本文创建于2005年6月30日，最后一次修改于2006年4月2日。

编者：

Holly Bergevin
Ingo Chao
Bruno Fassino
John Gallant
Georg Sørtun
Philippe Wittenbergh

特别致谢给予此项目支持的：
Dean Edwards, and Molly the cat

各种语言版本：
Original(English)
Brazilian Portuguese 　by　 Mauricio Samy Silva
中文版本 by old9
Italian by Gabriele Romanato

相关讨论：
dean.edwards.name/weblog/

联系作者：
spam.layout@satzansatz.de

版权说明：
本文基于　创作共用协议　发布。

目录

介绍
hasLayout —— 定义
术语
问题种种
Layout 从何而来
默认 layout 元素
属性
有关内联级别元素
脚本属性 hasLayout
CSS hacks
Hack整理
关于 IE Mac 的小问题
MSDN文档
分析
各种情况的详细说明
清除浮动和自动扩展适应高度
浮动元素旁边的元素
列表
表格
相对定位元素(r.p.)
绝对定位元素(a.p.)：包含区块，什么是包含区块？
滤镜
对已渲染元素的重排(re-flow)
背景原点
边距重叠
块级别的链接
在页面内使用键盘浏览：探索中
收缩包围(shrink-wrapping)现象
边缘裁切
堆叠，分层和 layout
混乱的 contenteditable
和 CSS 规范类似的地方
Quirks 模式
Layout —— 结论
拥有 layout —— 另外一个引擎？
不可消除的 bug

出处：web.Frontend
责任编辑：moby

上一页 On having layout [4] 下一页

◎进入论坛网站综合、网页制作版块参加讨论