IE6 浮動元素與非浮動元素在一起，3px偏移BUG解決方案

原創

2020-02-22 21:10

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 浮動元素與非浮動元素在一起，3px偏移BUG</title>
<style>
*{
	margin:0;
	padding:0;
	font-size:12px;
}
.box{
	width:220px;
	overflow:auto;
}
.leftbox{
	background:#CCC;
	width:100px;
	height:100px;
	float:left;
	*margin-right:-3px; /*針對IE6 浮動元素水平右外邊距移動-3px 即可解決*/
}
.rightbox{
	background:#CCC;
	width:100px;
	height:100px;
	float:right;
	*margin-left:-3px; /*針對IE6 浮動元素水平左外邊距移動-3px 即可解決*/
}
.textbox{
	background:#FFCCCC;
}
</style>
</head>

<body>
<div class="box">
	<div class="leftbox">浮動元素</div><p class="textbox">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
</div>

<div class="box">
	<div class="leftbox">浮動元素</div><img src="http://avatar.csdn.net/6/1/E/3_hedong37518585.jpg" border="0" />
</div>

<div class="box">
	<div class="rightbox">浮動元素</div><p class="textbox">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
</div>
</body>
</html>

在IE6下，左浮動和非浮動元素在一起，非浮動元素和浮動元素之間3px的空隙，右浮動也一樣，圖片也是一樣