IE6中使用bottom:0绝对定位到底部时的偏移BUG

又是可恶的IE6,调试一个小BUG的时间可能比开发若干个页面的DEMO还费时间,费脑筋。

今天碰到个绝对定位的问题,如果对一个元素设置了position:absolute及bottom:0,然后设置父元素的position为relative,在IE6中,当父元素在页面中所占据的高度(不包括margin)为偶数时,一切正常,但如果为奇数时,该绝对定位的子元素会与父元素的底部偏移1px,所以碰到这样的问题,可以尝试改变下父元素的height、border或padding,或者是改变该父元素的其他子元素也可以,只需要上下偏差1px即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> new document </title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    * {margin:0; padding:0;}
    div {margin:20px; font:bold 30px Tahoma; position:relative; background:#000; color:#FFF;}
    div p {position:absolute; left:100px; ; background:#F00;}
    .a {height:100px;}
    .b {height:101px;}
    .c {zoom:1;}
    .c h2 {padding:20px;font:bold 20px/30px Tahoma;}
    </style>
</head>

<body>
    <div class="a">
        a<p>z</p>
    </div>
    <div class="b">
        a<p>z</p>
    </div>
</body>
</html>

具体效果可以看http://www.iliawang.com/demo/IE6-position-absolute.html,当然,必须在IE6中打开。

没有IE6的可以直接看下图:

标签:, ,

?????