相对容器中绝对定位Bug
在页面布局中，将绝对定位的元素嵌套在相对定位的容器中，是一种很常见的布局。假设有两个元素，#outter 为父元素，#inner 为子元素：
<p id="outter">
<p id="inner"></p>
</p>
如果让父元素使用相对定位，子元素使用绝对定位，在 IE6 及更低版本中，它会有很多问题。最常见的问题有两个：一个问题是，当父元素的宽度为奇数时，子元素的 right 偏移值会错位;另一个问题是，当为父元素设置 padding 后，子元素的偏移起点位置错误。
先看看第一个问题，我们让父元素 width 属性的值是一个奇数，并通过 top 和 right 属性设置子元素的偏移：
#outter {
width: 205px;
height: 80px;
position: relative;
}
#inner {
width: 100px;
height: 60px;
top: 0;
right: 0;
position: absolute;
}
正常情况下，子元素的顶部紧贴父元素的底部、右侧紧贴父元素的右侧。在现代浏览器中的运行效果如图 1010 所示：
图10-10 现代浏览器中的运行效果
而在IE6中，子元素的右侧并没有紧贴父元素的右侧，而是向右偏移了 1px，得到的结果似乎是 right: 1px 的效果。运行效果如图 1011 所示：
图10-11 IE6中的运行效果
究其原因，这是由于相对定位父元素的宽度为奇数所致，如果把宽度设置为偶数，问题就不会出现。
再来看第二个问题，为了方便查看效果，为父元素设置 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 边框的内边缘。在现代浏览器中的运行结果如图 1012 所示：
图10-12 现代浏览器中的运行效果
而在IE6及更低版本中，top 的偏移是相对于其包含块边框的外边缘，left 的偏移是相对于其包含块 padding-box 的外边缘。运行结果如图 1013 所示：
图10-13 IE6中的运行效果
这个问题的原因，是相对定位的父元素没有触发布局，为了使IE6及更低版本中表现正确。可以为父元素显式设置宽度、或高度、或 zoom: 1，迫使父元素触发布局，使绝对定位子元素回到正确的位置。
但很多时候，根本无法给父元素指定一个合适的宽度和高度值，而 zoom: 1 又会导致父元素的 padding 失效。
因此，解决这个问题最好的办法，就是使用IE hack，把绝对定位子元素的 top 设置为父元素 border-top 的宽度，把 left 设置为等于父元素 padding-left 的负值。如：
#inner {
…
_top: 30px;
_left: -20px;
}
