IE中怎么会出现双倍边距？-DivCSS教程

日期：2015/6/28来源: IT猫扑网

　　IE6.0环境中双倍边距BUG。先看下面的CSS代码。

div {
float:left;
margin-left:10px;
width:420px;
height:150px;
border:1px solid red
}

　　这样设置以后。本来左边距设置为10px，但IE6.0解释为20px，这是一个比较头疼的问题。
　　但解决也非常简单。办法就是是加上display:inline。就搞定了。看下面的示例对比！

　　双陪边距的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.itmop.com</title>
<style type="text/css">
body {
margin:0
}
div {
float:left;
margin-left:10px;
width:420px;
height:150px;
border:1px solid red
}
</style>
</head>
<body>
<div>
Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />
</div>
</body>
</html>

　　解决BUG以后的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.itmop.com</title>
<style type="text/css">
body {
margin:0
}
div {
float:left;
margin-left:10px;
display:inline;
width:420px;
height:150px;
border:1px solid red
}
</style>
</head>
<body>
<div>
Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />
</div>
</body>
</html>