IE6- 有一个非常讨厌的 bug，当绝对定位元素的父元素高或宽为奇数时，bottom 和 right 会获取错误。
HTML
<div class="outer height199">
<p>This container has a height of 199px and width of 199px</p>
<div class="inner">img</div>
<div class="inner2">img</div>
</div>
<div class="outer height200">
<p>This container has a height of 200px and width of 200px</p>
<div class="inner">img</div>
<div class="inner2">img</div>
</div>
CSS
.outer{
width:200px;
background:red;
margin:10px;
position:relative;
float:left;
display:inline;/* ie double margin fix*/
}
.height199{height:199px;width:199px;}
.height200{height:200px;width:200px}
.height201{height:201px;width:201px;}
.height202{height:202px;width:202px;}
.height203{height:203px;width:203px;}
.height204{height:204px;width:204px;}
.height205{height:205px;width:205px}
.inner,.inner2{
width:30px;
height:30px;
position:absolute;
background:blue;
}
.inner{
bottom:0;
left:0;
}
.inner2{
top:0;
right:0;
}
p{clear:both;margin:0 40px 1em 5px}
可以看出在奇数容器下出现了1px 间距，而在偶数容器下正常。
不完美的解决方法：改变结构并使用浮动
HTML
<div class="fix">
<div class="outer height199">
<div class="inner2">img</div>
<p>This container has a height of 199px</p>
</div>
<div class="inner">img</div>
</div>
<div class="fix">
<div class="outer height200">
<div class="inner2">img</div>
<p>This container has a height of 200px</p>
</div>
<div class="inner">img</div>
</div>
CSS
.fix {
width:200px;
margin:10px;
position:relative;
float:left;
display:inline;/* ie double margin fix*/
}
.fix .outer{margin:0}
.fix .inner{
clear:both;
margin-top:-30px;
position:relative;
float:left;
}
.fix .inner2{float:right;position:static}