CSS的兼容性解决方案

什么是兼容性？

同一个网页，在不同浏览器下(IE6、IE7、IE8)下的显示效果不一致，这就是说"CSS不兼容"。

IETESTer可以同时测试IE5.5、IE6、IE7、IE8这些版本的网页效果。

解决CSS兼容性的方法

1. CSS全局设置的重要性
2. 常用的CSS兼容性的总结
3. CSS HACK（不推荐使用）

CSS全局样式的设置

1、清除网页中所有标签的内填充和外边距

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form, input,p, th,td{margin:0;padding:0}

2、项目符号

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

3、图片边框

img{border:none;}

4、超级链接

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

a:hover{text-decoration:underline;color:#ba2636;}

5、body网页中文本颜色、大小、行高、背景色的统一设置

body{font-size:12px;font-family:simsun ,"宋体";background:#fff;color:#2b2b2b}

6、各种标题

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }

h3{font-size:12px}

h4{font-size:12px;font-weight:normal}

7、常用的字体颜色

.red{color:#FF0000;}

.blue{color:#0000ff;}

.gray{color:#808080;}

……

8、清除和浮动

.floatL{float:left;}

.floatR{float:right;}

.clear{clear:both;}

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

常用的CSS兼容性问题

1、任何浏览器实现主页居中

IE中主页居中，使用的是text-align:center

Firefox中主页居中，使用的margin:0px auto;

body{

background:#ccc url(../images/bg-body.gif) repeat-x;

font-size:12px;

color:#444;

font-family:"宋体";

text-align:center; /*IE下的居中*/

}

ul,li{list-style:none;}

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

a:hover{color:#FF0000;}

.clear{clear:both;}

.box{width:960px;margin:0px auto;text-align:left;}

2、容器中，单行内容垂直居中

.title{height:30px;line-height:30px;}

3、IE6下，元素浮动，使margin左右加倍

.div1{

width:200px;

height:100px;

border:1px solid #006600;

margin:50px;

float:left;

display:inline; /*将块元素转成行内元素*/

_margin-left:25px; /* IE6能识别 */

}

4、IE6下，定义1px高的容器

.box{

height:1px;

background-color:#006600;

overflow:hidden; /*超出部分被隐藏了*/

}

5、统一光标的类型

.header .logo .div3{width:358px;height:107px;float:right;padding-top:15px;cursor:pointer;}

CSS HACK(不推荐使用)

针对不同浏览器，编写CSS 代码的过程，就叫CSS HACK。

（1）CSS属性的HACK

        .box{

background-color:#FF0000; //所有浏览器都支持

*background-color:#00FF00; // IE6和IE7支持

_background-color:#0000FF; //IE6支持

}

（2）CSS选择器的HACK (看一下即可)

.box{background-color:#FF0000;} //所有浏览器都识别

*+html .box{ *background-color:#00FF00;} //IE7能识别

*html .box{ _background-color:#0000FF;} //IE6能识别