10.4.5 相对容器中绝对定位Bug

在页面布局中，将绝对定位的元素嵌套在相对定位的容器中，是一种很常见的布局。假设有两个元素，#outter 为父元素，#inner 为子元素：

<div id="outter">
    <div id="inner"></div>
</div>

如果让父元素使用相对定位，子元素使用绝对定位，在 IE6 及更低版本中，它会有很多问题。最常见的问题有两个：一个问题是，当父元素的宽度为奇数时，子元素的 right 偏移值会错位；另一个问题是，当为父元素设置 padding 后，子元素的偏移起点位置错误。

先看看第一个问题，我们让父元素 width 属性的值是一个奇数，并通过 top 和 right 属性设置子元素的偏移：

#outter {
    width: 205px;
    height: 80px;
    position: relative;
}
#inner {
    width: 100px;
    height: 60px;
    top: 0;
    right: 0;
    position: absolute;
}

正常情况下，子元素的顶部紧贴父元素的底部、右侧紧贴父元素的右侧。在现代浏览器中的运行效果如图 10‑10 所示：

而在IE6中，子元素的右侧并没有紧贴父元素的右侧，而是向右偏移了 1px，得到的结果似乎是 right: 1px 的效果。运行效果如图 10‑11 所示：

究其原因，这是由于相对定位父元素的宽度为奇数所致，如果把宽度设置为偶数，问题就不会出现。

再来看第二个问题，为了方便查看效果，为父元素设置 30px 宽的边框，并为子元素设置宽度、高度、及 1px 的虚线边框：

#outter {
    padding: 20px;
    position: relative;
    border: 30px solid #ccc;
}
#inner {
    top: 0;
    left: 0;
    width: 100px;
    height: 20px;
    position: absolute;
    border: 1px dashed #f00;
}

正常情况下，绝对定位元素的偏移，是相对于其包含块边框的内边缘，即父元素 #outter 边框的内边缘。在现代浏览器中的运行结果如图 10‑12 所示：

而在IE6及更低版本中，top 的偏移是相对于其包含块边框的外边缘，left 的偏移是相对于其包含块 padding-box 的外边缘。运行结果如图 10‑13 所示：

这个问题的原因，是相对定位的父元素没有触发布局，为了使IE6及更低版本中表现正确。可以为父元素显式设置宽度、或高度、或 zoom: 1，迫使父元素触发布局，使绝对定位子元素回到正确的位置。

但很多时候，根本无法给父元素指定一个合适的宽度和高度值，而 zoom: 1 又会导致父元素的 padding 失效。

因此，解决这个问题最好的办法，就是使用IE hack，把绝对定位子元素的 top 设置为父元素 border-top 的宽度，把 left 设置为等于父元素 padding-left 的负值。如：

#inner {
    …
    _top: 30px;
    _left: -20px;
}