IE6 绝对定位元素的 1px 间距 bug（转自：http://www.99css.com/archives/53）

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}

ytzong 简译自《IE6 1px gap on absolute elements》