常见前端Bug及其修复方法

1、外双边距浮动Bug

    

2、3px文本偏移Bug

    

    设置了浮动，这个Bug就会在IE5和IE6之中显现出来

修复这个Bug：

   1、给包含文本的元素设置任意高度，迫使元素拥有布局，这在表面上会消除文本偏移

   2、需要将IE5-6/win上的外边距重新设置为0

   3、在浮动元素上设置一个负的3px的右外边距

如果支持IE5.x则：

如果支持IE6则：

3、IE6的重复字符Bug

   描述：在某些情况下，一系列浮动元素的最后几个字符会在浮动元素下面重复出现，当在一系列浮动元素的第一个和最后一个元素之间有多个注释时，这个Bug就会出现。前两个注释没有影响，但是后续的每个注释会导致两个字符重复出现。所以，3个注释会导致两个重复字符，4个注释会导致4个重复字符，5个则会导致6个出现

   修复：设置负的右外边距从最后一个浮动元素上去掉3像素，或者使容器扩大3像素。但这个可能会导致IE7出问题，因此，避免这个Bug最容易，最安全的方法是从HTML代码中删除注释。

4、IE6的“藏猫猫”Bug

   Bug出现条件：

      一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或者图像后面，只有刷新页面时才会重新出现。

   修复：

      1、最容易的还去掉父元素的背景颜色或图像，但通常不可行

      2、避免清理元素和浮动元素接触，如果容器元素应用了特定的尺寸，那么这个Bug似乎就不会出现了

      3、指定行高也可

      4、将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。

5、相对容器中的绝对定位

    出现原因：相对定位的元素没有获得IE/Win的内部拥有布局属性，因此，它们不会创建新的定位上下文，所有绝对定位元素相对于视口进行定位

  

修复：

   设置容器的高度和宽度（按需要，IE5-6可以使用条件注释）