CSS的兼容性

1.<div class="content float1"></div>以上这种写法：同一个HTML元素可以添加多个类名称，多个类名称之间用空格隔开。

2.浏览器兼容性简介

因为CSS代码是由浏览器软件来进行解释的，每个浏览器厂商到CSS标准执行的不是太完善。

同一个网页，在不同浏览器下显示的效果不一样，这种现象就是“不兼容”。

最不兼容的浏览器是：IE6、IE7、IE8

3.浏览器市场份额统计：http://tongji.baidu.com/data/browser

4.IE低版本浏览器兼容性测试软件：IETester

5.全局CSS设置(页面常用的元素和类直接用全局CSS进行设置，统一格式，防止不兼容)

（1）清除所有HTML元素的内外边距

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5,h6, form, fieldset, legend, img { margin:0; padding:0; }

（2）项目符号和编号

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

（3）图片要去除边框线

       img{border:none;}

（4）标题标记的设置

       h2{font-size:24px;padding:8px 0px;}

       h4{font-size:16px;padding:5px 0px;}

（5）全局链接的设置

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

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

（6）常用全局的类样式

       .clear{clear:both;}

       .float1{float:left;}

       .float2{float:right;}

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

       .red{color:#FF0000;}

       .blue{color:#0000FF;}

       #noLine{border:none;}

6.常用兼容性技巧

（1）网站主页绝对居中：不管在任何浏览器中，都能实现主页居中。

       在Firefox中，使用 margin:0pxauto; 来实现主页居中。

       在IE中，使用 text-align:center 来实现主页居中。

 

body{

       font-size:12px;

       color:#444;

       text-align:center;/*IE中居中写法，这个写法虽然解决了在IE5中主页居中的问题，但是页面内所有的文字都会居中，那么需要主页的内容用一个div（类名为box）套起来，然后让box中的文字变回原来的左对齐*/

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

}

.box{

width:980px;

margin:0px auto;

text-align:left;

}

（2）单行文本上下中齐

       h2{

              height:45px;

              line-height:45px;

}

（3）实现1px高的<div>的容器

.box{

       height:1px;

       overflow:hidden; /*在IE6下，IE6默认div至少是一个汉字的高，无法做到1px，增加多这个设置，就可以做到，使超出的部分隐藏起来*/

       background-color:#FF0000;

}

（4）光标类型

       .box{

              cursor:pointer;   /*手形*/  光标类型还有： help、wait、text等

}

（5）上下外边距合并（尽量少用margin）

       上下两个元素的外边距，会自动合并，并取其中较大的一个(所有浏览器都是)。

       我们解决的办法是：

       (1)只指定其中一个元素的下外边距或上外边距。

.div1{

       width:300px;

       height:100px;

       background-color:#FF0000;

       margin:20px 20px 70px;

}

.div2{

       width:300px;

       height:100px;

       background-color:#0000FF;

       margin:0px 50px 50px;

}

       (2)两个元素的中间外边距都取消，使用一个空的<div>，并指定一个高度，放在两个元素的中间。

              <div class="div1"></div>

<divstyle="height:70px;"></div>

<div class="div2"></div>

（6）左右外边距加倍(IE6下的一个现象，浮动后，设置margin，左边距加倍)

.box{

       width:400px;

       height:100px;

       margin:50px;

       float:left;

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

       background-color:#FF0000;

}

也可以使用hack技巧，在margin下写_margin:50px，这种写法只有IE6支持，会覆盖上面的margin设置。

7.CSS HACK

针对不同浏览器编写CSS代码的过程，称为CSS HACK。如：写一段只有IE6浏览器支持的CSS代码。

body{

       background-color:#FF0000;  /*所有浏览器都支持*/ 范围大的放在最上边

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

       _background-color:#0000FF; /*只有IE6支持*/支持范围最小的放在最小边

}    

 

注意：

       CSS HACK虽然能解决部分CSS兼容性的问题，但必竟不是W3C推荐的规范标准，因此尽量少用。

       平常我们写CSS代码，多用标准CSS写法，实在不行，偶尔用一下CSS HACK。