IE对比FF:图像float在IE有间隙(IE 3px Bug)

2009-3-22 20:19:56 来源：本站评论：

当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。

其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

作者:曹世茂网页来源:http://www.cnblogs.com/csmcn/archive/2008/03/27/1125479.html

另外参考一个文章:

两个层之间的为什么会有间隙(IE 3px bug)？

其实这就是传说中的“IE 3px bug”。解决的办法也比较简单。请看下面的示例说明。

IE中两个层之间的间隙（IE 3px bug）

XML/HTML代码

<!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>52css.com</title>
<style type="text/css">
<!--
#left {
<b style="color:black;background-color:#a0ffff">float</b>:left;
width:200px;
height:100px;
background:#f00;
}
#right {
width:200px;
height:100px;
background:#fc0;
}
-->
</style>
</head>
<body>
<div id="left">52css.com</div>
<div id="right">52css.com</div>
</body>
</html>

解决3px bug的方法之浮动法float

此例中，我们给右边的层，应用float:left;浮动，即可解决IE 3px bug。

XML/HTML代码

<!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>52css.com</title>
<style type="text/css">
<!--
#left {
<b style="color:black;background-color:#a0ffff">float</b>:left;
width:200px;
height:100px;
background:#f00;
}
#right {
<b style="color:black;background-color:#a0ffff">float</b>:left;
width:200px;
height:100px;
background:#fc0;
}
-->
</style>
</head>
<body>
<div id="left">52css.com</div>
<div id="right">52css.com</div>
</body>
</html>

上文网页来源:http://www.028wa.cn/Article/2008/0328/1316.html

我也评两句