CSS的兼容性解决方案

Posted 2020-07-04 尼农小道

什么是兼容性？

同一个网页，在不同浏览器下(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能识别