浏览器兼容性

1、浏览器兼容性简介

同一个网页，在不一样的浏览器下，显示的效果可能不一样，也就是所谓的“兼容性”。

兼容性调试，主要调试IE八、IE七、IE六、Firefox。

能够参考这个：浏览器市场份额调查。

 

2、兼容性详解

主要是如下三个方面：

全局CSS设置

经常使用的兼容性调试技巧

CSS HACK

 

3、全局CSS设置

1. 清除全部标记的内外边距

body,ul,li,a,img,p,input{ margin:0; padding:0; }

2. 去除项目符号或编号前面的符号

ul,ol,li{ list-style:none; }

3. 全局连接效果

a:link , a:visited{color:#444;text-decoration:none;}

a:hover{color:red;}

4. 网页中全部的文字大小颜色

body{ font-size:12px; font-family:宋体; color:#ccc; }

5. 去除图片的连接边框线

img{border:0;}

6. 全局的类样式

.floatL{ float:left; }

.floatR{ float:right; }

.clear{clear:both;}

.blank10{ height:10px; clear:both; }

.red{ color:red; }

.blue{ color:blue; }

 

4、经常使用的兼容性调试技巧

1. 实现全部浏览器的主页居中

Firefox下主页居中代码：.box{margin:0px auto}

IE5.5下主页居中代码：body{text-align:center;}

2. 单行文本上下居中

h1{

　　height: 30px;

　　leight-height: 30px;

}

3. 在IE6下，左右margin会加倍，彷佛是IE6的一个bug。

提示：排版时，能使用padding解决的，坚定不用margin。若是实在想用的话，就使用其中一边。

解决方案：使用 display: inline;

 

5、CSS HACK

针对不一样浏览器，书写不一样的CSS代码的过程，称为“CSS HACK”。

也就是说，写一个CSS代码，让IE6识别，其余浏览器不识别。

下面，针对不一样的浏览器，有几个符号：

这些符号实在CSS属性的前面加的，用于分辨不一样的浏览器版本。

"*" IE6和IE7都识别。如：.box{ *background-color:red; }

"_” 只有IE6识别。如：.box{ _background-color:green;}

使用CSS HACK来处理，IE6下左右margin会加倍的问题

注意：CSSHACK不是W3C的标准，所以，咱们尽可能少用。若是你调试兼容性，调试很差时，能够偶尔用一下。