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能识别

CSS的兼容性解决方案

标签：

原文地址：http://www.cnblogs.com/nyxd/p/5353456.html