什么是兼容性？
同一个网页，在不同浏览器下(IE6、IE7、IE8)下的显示效果不一致，这就是说"CSS不兼容"。
IETESTer可以同时测试IE5.5、IE6、IE7、IE8这些版本的网页效果。
解决CSS兼容性的方法
-
CSS全局设置的重要性
-
常用的CSS兼容性的总结
-
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{960px;margin:0px auto;text-align:left;}
2、容器中，单行内容垂直居中
.title{height:30px;line-height:30px;}
3、IE6下，元素浮动，使margin左右加倍
.div1{
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{358px;height:107px;float:right;padding-top:15px;cursor:pointer;}
CSS HACK(不推荐使用)
针对不同浏览器，编写CSS 代码的过程，就叫CSS HACK。
.box{
background-color:#FF0000; //所有浏览器都支持
*background-color:#00FF00; // IE6和IE7支持
_background-color:#0000FF; //IE6支持
}
.box{background-color:#FF0000;} //所有浏览器都识别
*+html .box{ *background-color:#00FF00;} //IE7能识别
*html .box{ _background-color:#0000FF;} //IE6能识别