修复IE下相对容器中绝对定位Bug

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

1. <div id="outter">
2.     <div id="inner"></div>
3. </div>

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

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

1. #outter {
2.     width: 205px;
3.     height: 80px;
4.     position: relative;
5. }
6. #inner {
7.     width: 100px;
8.     height: 60px;
9.     top: 0;
10.     right: 0;
11.     position: absolute;
12. }

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

图10-10 现代浏览器中的运行效果

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

图10-11 IE6中的运行效果

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

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

1. #outter {
2.     padding: 20px;
3.     position: relative;
4.     border: 30px solid #ccc;
5. }
6. #inner {
7.     top: 0;
8.     left: 0;
9.     width: 100px;
10.     height: 20px;
11.     position: absolute;
12.     border: 1px dashed #f00;
13. }

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

图10-12 现代浏览器中的运行效果

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

图10-13 IE6中的运行效果

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

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

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

1. #inner {
2.     …
3.     _top: 30px;
4.     _left: -20px;
5. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。