IE6 Doubled Float-Margin Bug（空白边加倍） - zzwind's Blog
IE6 Doubled Float-Margin Bug（空白边加倍）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#c{
width:400px;
height:300px;
border:2px solid red;
margin:100px;
margin-bottom:0px;
}
.f{
float:left;
margin:20px;
width:100px;
height:100px;
border:2px solid black;
display:inline;
}
</style>
</head>
<body>
<div id="c">
<div class="f" id="s1"></div><div class="f" id="s2"></div>
</div>
</body>
</html>
现象描述：
在IE7，FF3中浏览该页面发现s1和c之间的距离是20px（与预期相同），s1和s2之间的间距也是40px（与预期相同）；而在IE6中浏览该页面发现s1和c之间的距离是40px（距离翻倍了），s1和s2之间的间距是40px（与预期相同）。
现象分析：
1. s1和s2之间没有发生空白边叠加效应是因为s1和s2都是浮动元素，而空白边叠加效应是不会再浮动元素之间生效的；
2. 在IE6中s1和c之间的距离预期是20px，但结果是40px，是预期的两倍，视为IE6 BUG。
得出的结论：
IE6中与容器（示例中为c）相邻的浮动元素（示例中为s1）空白边会翻倍；但是浮动元素之间空白边表现正常（s1和s2之间的间距是40px，不是 60px或者80px）；同时发生空白边翻倍的那条边应该与浮动方向相同，例如如果是float：left，那么就是margin-left空白边翻倍， 但margin-right表现正常。
解决办法：
对于浮动元素添加一个CSS属性display:inline即可
解决方案分析：
对于设置了float属性（及其必须是left或者right）的元素将会变成block元素，不管设置浮动属性的元素原来是inline还是block，因此给浮动元素添加display：inline样式是不会带来任何负面效应的。浏览器会忽略该属性（设置了float属性的元素必然是block类别的元素），因此该方案不会有对原来的布局有任何影响。
2022年9月28日 15:13
Every 6th Standard student can download NCERT Economics Sample Paper 2023 Class 6 and study to know the examination pattern and to get ready to write an exam fearlessly for all formats of exams such as SA1, SA2, NCERT Economics Sample Paper Class 6 FA1, FA2, FA3, FA4 and Assignments. The teaching staff of the school and various institutional experts have suggested the NCERT STD-6 Economics Question Bank 2023 for all lessons and all topic most important questions which have been repeatedly asked in previous exams.