IE6 Double-Margin Bug

来源：互联网发布：博学乐园网络书法大赛编辑：程序博客网时间：2024/05/04 08:46

当margin与浮动元素在同一个方向时，IE6会把浮动元素中定义的margin值翻倍。
例如：
元素是左浮动(float left) 属性有margin-left: 100px;

则在IE6下会margin-left加倍也就是200px;

<html><head><title>double margin</title><style type="text/css">* {padding:0; margin:0;}#left {float:left;border:1px solid #CCC;margin-left:100px;}#width-100px {clear:both;width:98px;border:1px solid #00F;}</style></head><body><div id="main">    <div id="left">        left    </div>    <div id="width-100px">        100px    </div></div></body></html>

结果：

解决方法是在浮动元素中添加css样式display:inline;

#left {float:left;border:1px solid #CCC;margin-left:100px;display:inline;}

注意：只有当元素的的边距碰到其外围绕块的边沿时才会发发生双margin。如果元素向左浮动碰到一个左浮动的元素时它的margin不会翻倍。