对于页面重构师来说，最令人头痛的浏览器是哪个？我相信有 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>奇数宽高bug</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .rel{width:501px;height:501px;position:relative;background:red;} 9 .abs{width:200px;height:100px;position:absolute;background:yellow;right:0;bottom:0;} 10 </style> 11 </head> 12 <body> 13 <div class="rel"> 14 <div class="abs"></div> 15 </div> 16 </body> 17 </html>
可以看出，黄色背景的 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <title>div无法遮盖select</title> 6 <style type="text/css"> 7 .wrapper{position:relative;top:10px;left:26px;width:300px;height:300px;} 8 .box{position:absolute;top:0;left:50px;width:200px;height:200px;background:#FDF3D9;border:1px solid #EEAC53;} 9 </style> 10 </head> 11 <body> 12 <div class="wrapper"> 13 <select name="select" id="select"> 14 <option>测试选项</option> 15 <option>测试选项2</option> 16 <option>测试选项3</option> 17 </select> 18 <div class="box"></div> 19 </div> 20 </body> 21 </html>
产生的原因：在 ie6 下，浏览器将 select 元素视为窗口级元素，这时 div 或者其他元素无论 z-index 设置有多高，都无法遮住 select 元素。
解决方法：在需要遮盖的 div 中放入一个空的 iframe。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 .wrapper{position:relative;top:10px;left:26px;width:300px;height:300px;} 8 .box{position:absolute;top:0;left:50px;width:200px;height:200px;background:#FDF3D9;border:1px solid #EEAC53;} 9 .box iframe{display:block;position:absolute;top:0;left:0;z-index:1;width:200px;height:200px;filter:alpha(opacity=1);} 10 </style> 11 </head> 12 <body> 13 <div class="wrapper"> 14 <div class="box"><!--[if lt IE 7]><iframe src="" frameborder="0"></iframe><![endif]--></div> 15 <select name="select" id="select"> 16 <option>测试选项</option> 17 <option>测试选项2</option> 18 <option>测试选项3</option> 19 </select> 20 </div> 21 </body> 22 </html>
7、文字溢出 bug（ie6 注释 bug）
形成原因：
1、一个容器包含2个具有 float 样式的子容器，且第一个子容器为内联元素
2、第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于 3
3、在第二个容器前存在注释（ie6 注释 bug）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>文字溢出bug（IE6注释bug）</title> 6 </head> 7 <body> 8 <div style="400px;height:200px;"> 9 <div style="float:left;background:red;"></div> 10 <!--注释--> 11 <div style="float:left;405px;background:#ccc;">重复文字测试</div> 12 </div> 13 </body> 14 </html>
解决方法：
1、改变结构，不出现【一个容器包含 2 个具有 float 的子容器】的结构
2、减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于 3
3、去掉注释（推荐）
4、修正注释的写法。将<!--注释-->写成<!--[if !IE]>注释<![endif]-->
5、将文字放入新的容器内（推荐）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>文字溢出bug（IE6注释bug）</title> 6 </head> 7 <body> 8 <div style="400px;height:200px;"> 9 <div style="float:left;background:red;"></div> 10 <!--注释--> 11 <div style="float:left;405px;background:#ccc;"><span>重复文字测试</span></div> 12 </div> 13 </body> 14 </html>
8、firefox 内部 div 使用 margin-top，成为外部 div 的 margin-top
前面几个都是介绍 ie6 下的 bug，这次介绍 firefox 下的 bug。
解决方法：display:inline-block; 或者 overflow:hidden;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>firefox内部div使用margin-top，成为外部div的margin-top</title> 6 <style> 7 .clear{clear:both;} 8 .a{border:1px solid red;} 9 .b1{width:200px;height:130px;background:yellow;} 10 .b2{width:200px;height:130px;background:yellow;display:inline-block;overflow:hidden;} 11 .c{width:150px;height:100px;background:green;margin-top:30px;} 12 </style> 13 </head> 14 <body> 15 <div class="a"></div> 16 <div class="b1"><div class="c">firefox内部div使用margin-top，成为外部div的margin-top</div></div> 17 <div class="clear"></div><br /><br /> 18 <div class="a"></div> 19 <div class="b2"><div class="c">这下子正常了</div></div> 20 </body> 21 </html>