ie6下双边距的问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-04 00:31:39　-　阅:　-　评:0　-　积分:0

css初学者排版的页面用IETester在ie6中测试，经常是惨不忍睹。页面错位的现象相信你或多或少也经历过，对于此现象一般是由于浮动和双边距造成的。下面来说下关于双边距的问题，举一实例来加以说明下吧。源码如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6下双边距的问题--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="ie6下双边距,display:inline,display:block,ie6 bug,margin双倍">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:12px;
}
div{
border:1px solid #f00;
}
.content{
width:400px;
height:300px;
}
.content .content_l{
float:left;
width:388px;
height:298px;
margin-left:10px;
/*_display:inline;ie6*/
}
</style>
</head>
<body>
<div class="content">
<div class="content_l">看我在ie6下左边的间距会成双倍</div>
</div>
</body>
</html>

chrome浏览器下的效果图：

我们再来看看在ie6下的效果图：
ie6下双边距的问题
发现没有，左边的边距变成了20px！再看看源码中的margin-left:10px;。是不是觉得很奇怪呢？！为什么在ie6下会成了双边距呢？对于如此深奥的问题，我也不能解释清楚，但我知道解决方法。在相对应的地方加上display:inline;即可。

下面我们将源码按刚才说的修改下：

.content .content_l{float:left;width:388pxheight:298px;margin-left:10px_display:inline;}

再来看看在ie6下的效果图：
ie6下双边距的问题解决了

神奇吧，双边距竟然没有了！此时你想到了什么？你还会在所有出现margin-left的地方全都使用display:inline;吗？如果真是这样，那你就太浪费代码了。我们来分析一下：div是块对象，转化为内联对象后双边距就不存在了。我们可以假设：内联对象不存在双边距的问题。修改源码，让效果来说话吧。源码修改如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6下双边距的问题--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="ie6下双边距,display:inline,display:block,ie6 bug,margin双倍">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:12px;
}
div{
border:1px solid #f00;
}
.content{
width:400px;
height:300px;
}
.content span{
float:left;
width:388px;
height:298px;
margin-left:10px;
}
</style>
</head>
<body>
<div class="content">
<span>看我在ie6下左边的间距仍然是10px哦</span>
</div>
</body>
</html>

再来看看ie6下的效果图：
我是内联对象,没有双边距哦!
以后可不要遇到margin-left的地方就加display:inline哦!

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-04/68.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！