2009年9月27日星期日

IE6 绝对定位元素的 1px 间距 bug

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

2 条评论:

Lane 说...

很早就发现了这个Bug. 因为那时候在设计 http://bbs.blueidea.com/thread-2818595-1-2.html . 百般努力不得其法. 因为 position方式 布局的独特性. 考虑但没有使用此篇中的办法. 后来让公司的前端程序员写了JS来修复这问题, 但效率较差.

ytzong 说...

@Lane 你那篇文章很久之前拜读过,非常不错,Dynamic Drive上也有一些关于CSS Frames的DEMO:http://www.dynamicdrive.com/style/layouts/category/C11/P10/
Google reader/maps等也都是JS