浏览器常见的BUG
首先说明一点：
页面错位不等于浏览器BUG ，BUG 是指设置了正确的CSS，浏览器却不以预期的样式呈现。
比如设置了某个元素：margin-left: 10px; 但是在浏览器中，
这个 DIV 元素实际呈现的却是：margin-left: 20px;
——在这种情况下才有可能是浏览器 BUG 。
以下是一些常见的浏览器 BUG ：
1.上下 margin 叠加 bug
现在有二个元素： div1 和 div2，div1 的下面 有 10px 的外边距，div2 的上面 有 10px 的外边距，
样式如下：
#div1 { width: 100px; height: 100px; background: #eee; margin-bottom:10px;
}
#div2 { width: 100px; height: 100px; background: #eee; margin-top:10px;
}
结构如下：
<div id
=”div1″>div1</div>
<div id
=”div2″>div2</div>
我们原本期望这二个 div 之间距离是 20px ，然而效果却是这样：
也就是说：这二个 div 之间，有 10px 的空间被叠加
在一起。
假如把 div1 的 margin-bottom 增加到 15px，那么它们之间的距离就成了 15px，
仍然有 10px 的空间被叠加起来。
*解决方法： 给这二个 div 多加二个样式：float: left; clear: left;
最终样式：
#div1 { width: 100px; height: 100px; background: #eee; margin-bottom: 10px; float: left; clear: left;
}
#div2 { width: 100px; height: 100px; background: #eee; margin-top: 10px; float: left; clear: left;
}
最终效果图：
2. IE6 浮动 margin 双边距 bug
设置一个父级元素 box 和一个子级元素 childbox，
子级元素设置左浮动，并且还设置左边距 10px ：
样式如下：
#box { width: 200px; height: 150px; border: 1px solid #ccc; }
#childbox { width: 100px; height: 100px; background: red;
float: left; margin-left: 10px; }
结构如下：
<div id =”box”>
<div id =”childbox”>childbox</div>
</div>
这样设置以后，在 Firefox、ie7、ie8 下都正常显示，可是在 ie6 下，显示成这样：
我们明明只给了左边距为 10px！！—— 如果把 10px 改成 20px 的话，ie6 下就会变成 40px！！ 由此可见，在这种情况下，ie6 对 margin-left 的解释就是在原来的值上多加了一倍！！
*解决方法： 给子级元素 childbox 添加一行样式：display: inline;
最终样式：
#box { width: 200px; height: 150px; border: 1px solid #ccc; }
#childbox { width: 100px; height: 100px; background: red; float: left; margin-left: 10px;
display: inline;
}
最终效果图：
3. li 下 的 bug
当 li 里包含了任何设置浮动的元素 以后，此 bug 就会在 ie6、ie7 下出现：
样式如下：
ul,p { padding: 0; margin: 0; }
li { list-style: none; }
/* 清除浏览器默认样式 */
ul { width: 110px; }
li { width: 100px; height: 20px; border: 1px solid #333; }
p { width: 100px; height: 20px; float: left;
}
结构如下：
<ul>
<li><p>p</p></li>
<li><p>p</p></li>
</ul>
在 ie6、ie7 里莫明奇妙多出来了几个象素：
注意：我并没有给 li 设置 margin-bottom 的样式。
*解决方法： 给 li 多添加一行样式：float: left; 并且要保证 li 拥有足够的宽 ，别让第二行的 li 真的浮动上来！
最终样式：
ul,p { padding: 0; margin: 0; }
li { list-style: none; }
/* 清除浏览器默认样式 */
ul { width: 110px;
}
li { width: 100px;
height: 20px; border: 1px solid #333; float: left;
}
p { width: 100px; height: 20px; float: left; }
4. ie6 绝对定位下的 1 象素 bug
绝对定位真是个好样式，在众多样式之中它最可爱^_^，你希望它跑到哪去，它就跑到哪里，可惜，这样的乖孩子，也禁不住 ie6 的折磨！！
我们先把父级元素的宽 设置成任何奇数 ，例如：350px，让子级元素浮动到父级右侧：
样式如下：
#box { width: 155px;
height: 121px; position: relative; background: red; }
#childbox { width: 100px; height: 100px; position: absolute; top: 0; right: 0;
background: yellow; }
结构如下：
<div id
=”box”>
<div id
=”childbox”></div>
</div>
结果，讨厌的 1px 出现了：
注意看右侧，那虽然细微、但仍然很刺眼的 1px bug ！！！
如果把位置调到右下角，结果下面 和右边 都出现了这 1px 的 bug ！！
这个细小的 bug 虽然不起眼，但如果我们用 绝对定位 来处理 圆角效果 的话，那就让人郁闷了～···
*解决方法：最好把父级的宽设置成偶数！否则，就只能用 css hack 代码了！
