郁闷的1px - IE6绝对定位的神奇bug

 

昨天做边框圆角的时候发现一个bug。

这个bug实际上出现在IE6以下版本的IE浏览器上。

 

出现情况在：

1.外层元素用position:relative定位，并且实际content宽/高为奇数；

2.内层元素使用position:absolute定位，并且使用了bottom/right定位。

 

仔细看下面两个情况有什么不同（要使用IE6以下浏览器，其他浏览器不会出现该bug）：  

(1)

19px
38px
57px

神奇的1px

(2)

19px
38px

神奇的1px

 

这是使用的代码：

<style type="text/css">
.wrapper {
    position:relative;
    width:201px;
    line-height:19px; 
    background:#000; 
    color:#FFF;
}
.obj {
    position:absolute; 
    right:0px; 
    bottom:0px; 
    border:1px solid #F00;
}
</style>

(1)
<div class="wrapper">
    19px<br>38px<br>57px
    <div class="obj">神奇的1px</div>
</div>
(2)
<div class="wrapper">
    19px<br>38px
    <div class="obj">神奇的1px</div>
</div>

  

眼尖的你可能发现了，在(2)中内层div可以按预期的bottom定位定位到父元素的最底部。而(1)中却出现了bottom:1px的定位效果。

这就是所谓的 神奇的1px 了。

区别就在于(1)中父元素的高为19*3=57px，而(2)中父元素的高为19*2=38px，奇数与偶数的区别。

 

我们构造下面一个例子：

(3)

神奇的1px

(4)

神奇的1px

 

代码：

<style type="text/css">
.obj {
    position:absolute; 
    right:0px; 
    bottom:0px; 
    border:1px solid #F00;
}
.wrapper1 {
    position:relative;
    width:100px;
    height:100px;
    background:#000; 
    color:#FFF;
}
.wrapper2 {
    position:relative;
    width:101px;
    height:101px;
    background:#000; 
    color:#FFF;
}
</style>

(3)
<div class="wrapper1">
    <div class="obj">神奇的1px</div>
</div>
(4)
<div class="wrapper2">
    <div class="obj">神奇的1px</div>
</div>

 

可以清楚地看到，(4)中的bottom和right定位都出现了类似的问题，而(3)中不会。(3)和(4)的区别就在于width和height的奇偶区别。

也就是说，当外层content高或宽(测试过padding对此没有影响)为奇数时，bottom和right的绝对定位会出现+1px的偏差。