声明： web前端学习笔记，欢迎大神指点。联系QQ：1522025433.
描述：在IE6中，一个居左（或居右）浮动的元素放置进一个容器盒(box)，并在浮动元素上使用了左边距(或右边距) 在ie6内便产生双倍边距。
hack:给浮动元素添加声明：display:inline;
案例代码：
1 1 <title>IE6双倍边距</title> 2 2 <style type="text/css"> 3 3 *{ 4 4 margin: 0; 5 5 padding: 0; 6 6 } 7 7 8 8 .box1 { 9 9 /*display: inline; 给产生双倍间距的元素添加此属性即可恢复正常*/ 10 10 float: left; 11 11 width: 100px; 12 12 height: 100px; 13 13 margin: 0 50px; 14 14 background: orange; 15 15 } 16 16 17 17 .box2 { 18 18 float: left; 19 19 width: 100px; 20 20 height: 100px; 21 21 background: green; 22 22 } 23 23 24 24 25 25 </style>
html：
1 <body> 2 <div class="box1"></div> 3 <div class="box2"></div> 4 </body>
正常浏览器效果：
在ie6浏览器：
可见在ie6中产生了双倍间距，
决绝方法给产生双倍间距的浮动元素添加 display:inline; j即可解决问题。