常见的几种浏览器兼容性问题和解决方案

浏览器兼容问题一: 不同浏览器的标签默认的外补丁和内补丁不同

解决方案：CSS里    *{margin:0;padding:0;}     

浏览器兼容问题二: IE6 的横向margin加倍

产生原因：块属性 float 有横向margin

解决方案：display:inline;

浏览器兼容问题三：IE6 下有默认的行高

解决方案：overflow:hidden 或者用font-size:0   line-height: xxpx;

浏览器兼容问题四：在各浏览器下img有间隙

解决方案：float  浮动;

浏览器兼容问题五：IE6 不识别最大宽度和最小高度 意味min-width/height 和Max-width/height 在IE6中没效果

解决方案：(1)：.abc{border:1px blue solid;width:200px;height:200px;}

 html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}

(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（因为ie6有一个特征，当定义一个高度时，如果内容超过高度，元素会自动调整高度。）

浏览器兼容问题六：li之间的间距

解决方案:li 设置 vertical-align:middle;

浏览器兼容问题七：优先级!important  在IE6中!important 具有bug 在同一组属性中 !important 起不了作用

浏览器兼容问题八：IE6 不支持 fixed

/*对于非IE6可以这样写*/
#top{  
    position:fixed;  
    bottom:0;  
    right:20px;  
}  

/*但是IE6是不支持fixed定位的，需要另外重写*/
#top{  
    position:fixed;  
    _position:absolute;  
    top:0;  
    right:20px;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));
}  

/*使用hack使IE6实现该效果，但这个东东会闪烁，需要以下代码*/
*html{  
    background-image:url(about:blank);  
    background-attachment:fixed;  
}  

/*使固定在顶部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));  
}  

/*固定在底部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));  
}  
/*垂直居中*/
#top{
    position:fixed;
    top:50%;
    margin-top:-50px;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); 
}

浏览器兼容问题九 ：解决IE6 最大 最小宽高hack方法

/* 最小宽度 */
.min_width{
    min-width:300px;
    _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大宽度 */
.max_width{
   max-width:600px;
   _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
   min-height:200px;
   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
   max-height:400px;
   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}

浏览器兼容问题十 ：z-index 不起用作的bug

解决方案:当父标签属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

浏览器兼容问题十一：IE 各版本的hack

/*类内部hack：*/
    .header {_width:100px;}            /* IE6专用*/
    .header {*+width:100px;}        /* IE7专用*/
    .header {*width:100px;}            /* IE6、IE7共用*/
    .header {width:100px\0;}        /* IE8、IE9共用*/
    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {width:330px\9\0;}    /* IE9专用*/

/*选择器Hack：*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/