IE6 3px bug

出现场景:

两个元素一个浮动一个不浮动,非浮动元素在浮动元素后面,并且非浮动元素设置了宽度(应该是触发了haslayout),如此这般IE6下两个元素会出现3px间隔

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>marginTest2</title>
		<style>
			.gray {
				background-color:gray;
			}
			.red {
				background-color: red;
				
			}
			.left{
				float: left;
				height:100px;
			}
			.margin-top{
				margin-top: 5px;
			}
			.widht{
				width:200px;
			}
			
		</style>
	</head>
	<body>
			<div class="left gray margin-top" >float</div>
			<div class="red widht">nofloat</div>
	</body>
</html>

 IE 6下表现


IE 7表现


firefox chrome ie8表现

 


(这里还有浮动的bug,先暂且不论)

 

解决方案:

1:将非浮动元素也改为浮动。

2:使用IE6 hack  在浮动元素上加上   _margin-right:-3px;消除3px

你可能感兴趣的:(ie6)