IE6下什么情况才会出现双倍边距问题:
只有知道问题出现的原因，才能够在出现问题前有意识的去避免问题的发生，或者能够第一时间查找到问题的所在。下面简单介绍一下IE6浏览器在什么情况下才会出现双边距问题。
下面看个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
width:200px;
height:200px;
border:1px solid blue;
}
.children
{
float:left;
width:100px;
height:100px;
border:1px solid red;
margin-left:10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
以上代码中，子div的左边距出现了加倍现象。也就是说当对象的浮动方向和外边距的方向一致时候会产生外边距加倍现象。
再来看一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent
{
width:400px;
height:200px;
border:1px solid green;
overflow:hidden;
}
.left
{
width:100px;
height:50px;
border:1px solid blue;
float:left;
margin-left:10px;
}
.middle
{
width:100px;
height:50px;
border:1px solid blue;
float:left;
margin-left:10px;
}
.right
{
width:80px;
height:50px;
border:1px solid red;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
在上面的代码中，IE6浏览器下只有第一个子div产生了双倍边距现象，而第二个、第三个都没有产生，于是我们可以得出，在同一行的浮动div只有第一个可能产生双倍边距。
根据上面两个现象我们可以总结得出，对象浮动方向与外边距方向一致且是同一行中的中第一个浮动对象才会产生双倍边距。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/499.html
时间： 2024-10-10 14:31:46