如何解决IE6浮动时产生双倍边距的BUG？

IE6臭名昭著的双倍边距bug发生在浮动元素的左侧或右侧同时设置了margin时。解决这个问题的方法有很多，最常见且兼容性最好的方法包括：

• 使用display: inline;: 这是最常用的也是最有效的方法。将浮动元素的display属性设置为inline可以避免双倍边距。需要注意的是，display: inline;会使元素失去块级元素的特性，例如设置宽度和高度。如果需要保留块级元素的特性，可以使用display: inline-block;，但这在IE6中需要一些额外的hack来支持。

• 设置_margin: value;: 这是一个IE6专用的CSS hack，使用下划线前缀。你可以设置_margin-left或_margin-right为正常值的一半，或者直接设置为想要的值。例如：

.float-element {
  float: left;
  margin-left: 20px; /* 所有浏览器 */
  _margin-left: 10px; /* IE6 only */ 
}

或者更干脆地：

.float-element {
  float: left;
  _margin-left: 10px; /* IE6 only */ 
}

• 使用条件注释: 这种方法可以更精确地针对IE6应用样式，避免影响其他浏览器。

<!--[if IE 6]>
<style type="text/css">
.float-element {
  margin-left: 10px;
}
</style>
<![endif]-->

• 避免同时设置浮动和水平margin: 如果可能的话，尽量避免在同一个元素上同时设置浮动和水平margin。例如，可以将margin设置在父元素上。

选择哪种方法？

display: inline;通常是最简单和最常用的方法。如果需要保留块级元素的特性，可以使用display: inline-block;，但需要额外的hack来支持IE6。_margin hack也很有效，但不太优雅。条件注释是更精确的解决方案，但增加了代码的复杂性。 避免同时设置浮动和水平margin是最佳实践，但并非总是可行。

根据具体情况选择最合适的方法即可。 在现代前端开发中，由于IE6的使用率已经非常低，通常会选择直接忽略这个问题，或者使用display: inline;快速解决。 如果你的项目仍然需要兼容IE6，建议使用条件注释或_margin hack。