又是可恶的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; bottom:0; 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的可以直接看下图:
