IE6中设定了position: relative; float: left的容器下,如果存在着多个带有背景的列表,那么这些列表中有一部分会显示不正常,具体的表现为背景消失。例如下面的代码(请在IE6中查看):
<!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>TEST</title>
</head>
<style type="text/css">
#container {
position: relative;
float: left;
}
#container li {
background: red;
}
</style>
<body>
<div id="container">
<ul>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
</ul>
<ul>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
</ul>
<ul>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
<li>Hello Kitty</li>
</ul>
</div>
</body>
</html>
解决的方法是给li也加上position: relative。这个BUG的具体描述,请参考:http://www.positioniseverything.net/explorer/ie-listbug.html

0 Comments.