昨天做边框圆角的时候发现一个bug。
这个bug实际上出现在IE6以下版本的IE浏览器上。
出现情况在:
1.外层元素用position:relative定位,并且实际content宽/高为奇数;
2.内层元素使用position:absolute定位,并且使用了bottom/right定位。
仔细看下面两个情况有什么不同(要使用IE6以下浏览器,其他浏览器不会出现该bug):
(1)
19px
38px
57px
(2)
38px
57px
神奇的1px
19px
38px
38px
神奇的1px
这是使用的代码:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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
神奇的1px
代码:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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的偏差。