消失的列表背景

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

发表评论