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

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

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

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

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

解决方案：display:inline;

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

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



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

解决方案：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*/