转载：On having layout

　　以上某些问题还是无法解决的，所以如果需要列表符号的时候最好避免让列表和列表元素获得 layout。如果需要限定尺寸，最好给别的元素设定尺寸，比如给整个列表外面套一个元素并设定它的宽度，又或者比如给每个列表元素中的内容设定高度等等。

　　另一个IE中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。

　　table 总是有 layout 的，它总表现为一个已定义宽度的对象。在IE6中，table-layout: fixed 通常和一个宽度设为100%的表格相同，同时这也会带来很多问题(一些计算方面的错误)。另外在IE5.5和IE6的quirks模式下还有一些别的需要注意的情况。

　　注意，由于 position: relative 并不触发 hasLayout，所以很多诸如内容消失或错位的渲染错误就会因此而起。这些现象可能会在刷新页面、调整窗口大小、滚动页面、选中内容等情况下出现。原因是 IE 在据这个属性对元素做偏移处理时，却似乎忘了发出信号让其 layout 孩子元素进行“重绘”(而如果是一个layout元素，那么在其重绘事件的信号链中，这个传给其孩子的信号是会正常发出的)。

　　以上是一些相关问题的描述。作为经验之谈，相对定位一个元素时最好给予其 layout。再有，我们也需要检查拥有这种结构的父元素是否也需要 layout 或者position: relative亦或二者都需要，如果涉及到浮动元素这点就十分重要。

　　理解 CSS 的包含区块概念很重要，它回答了绝对定位元素是相对哪里定位的问题：包含区块决定了偏移起点，包含区块定义了百分比长度的计算参考。

　　对于绝对定位元素，包含区块是由其最近的定位祖先决定的。如果其祖先都没有被定位，那么就使用初始包含区块 html。

　　通常情况下我们会用 position: relative 来设定任意包含区块。这就是说，我们可以让一个绝对定位元素所参考的原点和长度等不依赖于元素的排列顺序，这可以满足诸如“内容优先”这种可访问性概念的需要，也可以给复杂的浮动布局带来方便。

　　但是由于 layout 概念的存在，这种设计理念的效果在IE中就要打个问号了。因为在IE中绝对定位的元素是相对于其最近的 layout 定位祖先而做偏移的，而百分比的尺寸却是参考这个 layout 定位祖先的下一个 layout 祖先计算的。注意这里的小差别，还有刚才提到 position: relative 是不会触发 hasLayout 的。

　　假设一个无 layout 的父元素被相对定位了——我们就得给它赋予 layout 才能使偏移量起作用：

　　假设一个未定位的父元素需要特定尺寸，而且页面设计是基于百分比宽度的——我们就可以放弃这个想法了，因为浏览器支持不佳：

　　MS专有的滤镜属性 filter 是只适用于 layout 元素的。有些滤镜扩展了对象的边界。它们会显示出自身特有的缺陷。

　　当所有元素都已渲染完成时，如果有一个因鼠标经过而引起的变化产生(比如某个链接的 background 有变化)，IE会对其 layout 包含区块进行重排。有时一些元素就会因此被排到了新的位置，因为当这个鼠标经过发生时，IE已经知道了所有相关元素的宽度、偏移量等数据了。这在文档首次载入时则不会发生，那时由于自动扩张的特性，宽度还无法确定。这种情况会导致在鼠标经过时页面出现跳变。

　　这些和重排问题相关的 bug 会给百分比边距和补白使用较多的流动布局带来不少麻烦。

　　MS专有的这个 hasLayout 还会影响背景的定位和扩展。比如，根据 ，background-position: 0 0 应该指元素的“补白边缘(padding edge)”。而在 IE/Win 下，如果 hasLayout = false 则指的是“边框边缘(border edge)”，当 hasLayout=true 时指的才是补白边缘：

　　hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠：

　　在 IE/Win 中如果这个盒子有 layout 那么这种现象就不会发生了：似乎拥有 layout 会阻止其孩子的边距伸出包含容器之外。此外当 hasLayout = true 时，不论包含容器还是孩子元素，都会有边距计算错误的问题出现。

　　hasLayout 会影响一个块级别链接的鼠标响应区域(可点击区域)。通常 hasLayout = false 时只有文字覆盖区域才能响应。而 hasLayout = true 则整个块状区域都可响应。添加了 onclick/onmouseover 等事件的任意块级元素也有同样的现象。

　　当使用 tab 在页面中浏览时，如果进入了一个页内链接(in-page link)，那么接下来再按的 tab 键就不会正常继续了：

　　tab 键会把用户带到(这通常是错误的)其最近的 layout 祖先中的第一个目标(如果这个祖先是由 table， div， span 或某些别的标签构成)。

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

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!