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

最新推荐文章于 2024-09-21 17:14:17 发布

转载最新推荐文章于 2024-09-21 17:14:17 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhengchuyu/archive/2008/10/09/1306805.html

本文详细探讨了在IE6及其以下版本中，当外层元素使用relative定位且尺寸为奇数，内层absolute定位元素使用bottom/right属性时，出现的1px定位偏差问题。通过对比不同情况下代码实现的效果，揭示了这一奇特现象的原因。

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

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

出现情况在：

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

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

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

(1)

19px
38px
57px

神奇的1px

(2)

19px
38px

神奇的1px

这是使用的代码：

Code
<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

代码：

Code
<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的偏差。

转载于:https://www.cnblogs.com/zhengchuyu/archive/2008/10/09/1306805.html