各大浏览器兼容性问题解决

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

一、IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大

解决方法：将盒子的字号，设置小（小于盒子的高），比如0px

height:4px;
_font-size: 0px;

注：css属性前面加下划线是IE6认识的专有属性

二、IE6不支持用overflow:hidden来清除浮动

解决办法：追加一条css:_zoom:1

overflow: hidden;
 _zoom: 1;

实际上_zoom:1能够触发浏览器hasLayout机制，这个机制只有IE6有

三、IE6双倍margin的bug

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素会出现双倍margin

解决方法：

1、让浮动的方向和margin方向相反（推荐）

2、使用hack，单独给队首的元素写一个一半的margin，或者使用display: inline;

四、IE6的3px bug

子元素右（左）浮动，同时给浮动的子元素设置margin-right，在IE6中会多出3px

解决办法：这时说明你的代码是不标准的，因为处理父子之间的距离不应该用margin

五、4.IE6最小最大宽度和最小最大高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

解决方法：

.min-width {
            min-width: 600px;
            _width: expression(document.body.clientWidth < 600 ? "600px" : "auto");
        }

.max-width {
            max-width: 600px;
            _width: expression(document.body.clientWidth > 600 ? "600px" : "auto");
        }


.min_height{
            min-height:200px;
            _height:expression(this.scrollHeight < 200 ? "200px" : "auto");
        }

.max_height{
            max-height:400px;
            _height:expression(this.scrollHeight > 400 ? "400px" : "auto");
        }

.min_and_max_width{
            min-width:300px;
            max-width:600px;
            _width: expression(document.body.clientWidth < 300 ? "300px" :
                    ( document.body.clientWidth > 600 ? "600px" : "auto"));
        }

.min_and_max_height{
            min-height:200px;
            max-height:400px;
            _height: expression( this.scrollHeight < 200 ? "200px" :
                     ( this.scrollHeight > 400 ? "400px" : "auto"));
        }

六、IE6下图片下面有3px空隙产生

解决方法：设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决. <