DIV浮动IE文本出现3px间距的bug
发生场合：当左边对象是浮动的，右边对象采用外补丁的左边距来定位，则右边对象内的文本会离左边有3px的空白误差。
没加修正：
运行代码框
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}
#layout{
background: #F1F1F1;
width: 400px;
float: left;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
background: #6d6;
}
p {
margin: 0 0 0 100px;
background: #dd9;
}
-->
</style>
</head>
<body>
<div id="layout"><div id="floatbox">floatbox</div><p>离左边3px</p><p>离左边3px</p></div>
</body>
</html>
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
修正过：(加了以下代码)
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
不考虑mac下ie5.02
运行代码框
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}
#layout{
background: #F1F1F1;
width: 400px;
float: left;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
background: #6d6;
}
p {
margin: 0 0 0 100px;
background: #dd9;
}
* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
-->
</style>
</head>
<body>
<div id="layout"><div id="floatbox">floatbox</div><p>现在没有3px了</p><p>现在没有3px了</p></div>
</body>
</html>
您可能感兴趣的文章：
什么是BFC和hasLayout？
CSS浏览器兼容性问题及解决方案
DIV浮动IE文本出现3px间距的bug
IE6下溢出多余文字解决方案Iebug
CSS浮动属性Float入门教程
css中负Margin你不知道的秘密
css padding在ie7、ie6、firefox中的兼容问题
css margin属性兼容性分析
总结：制作网页写CSS时参考的内容
css中去除inline-block元素间间距多种方法分享