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

2015-06-28 00:00作者：网管联盟

　　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& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&>
<html xmlns=&http://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& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&>
<html xmlns=&http://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>