对于页面重构师来说，最令人头痛的浏览器是哪个？我相信有 99% 的人会选择 ie6。下面我就来介绍一些我遇到过的 ie6 bug 以及解决方法，当然也包括其他浏览器。

1、ie6 双边距 bug

当元素浮动并且同时有外边距时，在 ie6 下会产生双倍距离。（.content{float:left;margin-left:10px;} 其他浏览器下左边距是 10px，ie6 下左边距是 20px）

解决方法：display:inline;（.content{float:left;margin-left:10px;display:inline;}）

2、奇数宽高 bug

在相对定位和绝对定位下，当外层相对定位的宽度或高度是奇数时，会产生这个 bug。我们看下例子：

1    2    3    4     
        5        6       11   12   13     
     
        14         
      
  15     
     
  16   17 

可以看出，黄色背景的 div 并没有完全在右下角，下边和右边各留了 1 像素。

解决方法：将外层相对定位的 div 宽高改为偶数即可。

3、ie6 position:fixed; 无效

如今很多页面上都有分享的功能，我们可以发现随着浏览器的滚动，位置并没有变化，这是因为使用了 position:fixed; 效果，但是在 ie6 下并不支持这个属性。那怎么办呢？该如何实现这样的效果呢？很简单，在 css 中用表达式写 js 来实现这个效果。

/*定位在左上角*/.ie6fixedLT{
   position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop));}/*定位在右上角*/.ie6fixedRT{
   position:absolute;right:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop));}/*定位在左下角*/.ie6fixedLB{
   position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}/*定位在右下角*/.ie6fixedRB{
   position:absolute;right:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}     /* 修正ie6振动bug */  *html,*html body{
   background-image:url(about:blank);background-attachment:fixed;}

4、ie6 高度小于 10 像素 bug

在 ie6 下有默认行高，这就使得高度小于 10 像素的块级元素无法显示正确的高度。

解决方法：给高度小于 10 像素的元素添加 font-size:0;overflow:hidden;

5、ie6 最小高度

在 ie6 中，并不认识 min- 和 max- 前缀的宽度高度。但是有时我们做页面的时候会用到，该如何解决呢？

解决方法：

方法一：用 js 来解决（不值得推荐）

1 .maxWidth{
   max-width:200px; width:expression(this.width > 200 ? '200px' : true);}  2 .minHeight{
   min-height:200px; height:expression(this.height < 200 ? '200px' : true);}

解决 expression 性能问题

1 .minWidth{
   min-width:200px; width:expression((function(o){o.style.width = (o.width < 200 ? '200px' : o.width);})(this));}

方法二：hack 写法（推荐）

1 .minHeight{
   height:auto !important;height:100px;min-height:100px;}

注意写法的顺序

6、ie6 下 div 无法遮盖 select

1    2    3    4 
        5    6   10   11   12 
     
        13     
        14         测试选项  15         测试选项2  16         测试选项3  17       18     
      
  19 
     
  20   21 

产生的原因：在 ie6 下，浏览器将 select 元素视为窗口级元素，这时 div 或者其他元素无论 z-index 设置有多高，都无法遮住 select 元素。

解决方法：在需要遮盖的 div 中放入一个空的 iframe。

1    2    3    4 
        5    6   11   12   13 
     
        14 
      
       
      
  15     
        16         测试选项  17         测试选项2  18         测试选项3  19       20 
     
  21   22 

7、文字溢出 bug（ie6 注释 bug）

形成原因：

1、一个容器包含2个具有 float 样式的子容器，且第一个子容器为内联元素

2、第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于 3

3、在第二个容器前存在注释（ie6 注释 bug）

1    2    3    4     
        5        6    7    8     
     
         9         
      
  10         
        11         
      
       重复文字测试
      
  12     
     
  13   14 

解决方法：

1、改变结构，不出现【一个容器包含 2 个具有 float 的子容器】的结构

2、减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于 3

3、去掉注释（推荐）

4、修正注释的写法。将<!--注释-->写成<!--[if !IE]>注释<![endif]-->

5、将文字放入新的容器内（推荐）

1    2    3    4     
        5        6    7    8     
     
         9         
      
  10         
        11         
      
       重复文字测试
      
  12     
     
  13   14 

8、firefox 内部 div 使用 margin-top，成为外部 div 的 margin-top

前面几个都是介绍 ie6 下的 bug，这次介绍 firefox 下的 bug。

解决方法：display:inline-block; 或者 overflow:hidden;

1    2    3    4     
        5        6       13   14   15     
     
  16     
     
      
       firefox内部div使用margin-top，成为外部div的margin-top
      
     
  17     
     
  18     
     
  19     
     
      
       这下子正常了
      
     
  20   21