css属性兼容主流浏览器

目前，对于网页中一些浏览器兼容性问题，可以使用css hack（css 招数）和浏览器Ｂug修复的方式解决。

名词解释：

　　css Hack：针对特定浏览器编写冗余代码，这是一种欺骗浏览器的行为，预示着有更好的解决办法。

　　浏览器bug修复：针对浏览器本身的bug，使用css自有的属性，进行浏览器显示问题的修复。

常见浏览器兼容性解决方案：

1、ＩＥ有条件注释

　　代码示例：

　　　　<!-- [ if IE8 ] >

　　　　　　<style>

　　　　　　　　@import " test.css";

　　　　　　</style>

　　　　<! [endif] -->

　　　　在语法中：

　　　　<!-- [if IE8] >...<![endif]-->:用于声明浏览器版本，在该版本浏览器中使用其中的样式表。

　　　　@import"test.css":使用导入式导入样式表

2、子选择器招数

　　代码示例：

　　html>body {

　　　　background-image:url(bg.png);

　　}

　　在语法中:

　　html>body：针对ie6及其以下版本，隐藏透明图片bg.png

3、*html招数

　　*html {

　　　　font-size:14px;

　　}

　　在语法中：

　　*html:针对ie6及其以下版本，设置字号为14像素。

4、!important招数

　　代码示例：

　　#nav {

　　　　font-size:18px !important;　　//ie7以上版本

　　　　font-size:14px;　　　　　　　//ie6以下版本

　　}

　　在语法中：使用!important来提高权重，优先加载。

5、针对IE6~IE8的招数

　　_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。

　　*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
　　9：选择IE6+
　　：选择IE8+和Opera
　　[;property:value;];

　　：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，

　　第一个分号前可以是任意规则或任意多个规则[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。

　　生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

 　　代码示例：

　　　　.test{
　　　　　　 color:#c30;          /* For Firefox */
 　　　　　　[;color:#ddd;];      /* For webkit(Chrome and Safari) */
 　　　　　　color:#090;        /* For Opera */
 　　　　　　color:#00f9;        /* For IE8+ */
 　　　　　　*color:#f00;         /* For IE7*/
 　　　　　　_color:#ff0;         /* For IE6*/
　　　　}

注意：同时设置多个浏览器的css hack时，必须注意浏览器版本声明顺序：高——>低，即ie8 --> ie7 -->ie6.

6、IE6双倍空白边距　Bug修复

　　代码示例：

　　#nav {

　　　　float:left;

　　　　margin:10px;

　　　　display:inline;

　　}

　　产生条件：对某一元素，同时设置float属性和margin属性。

　　显示效果：在ie6中，左、右外边距加倍，上、下外边距无影响。

　　解决办法：增加display:inline;。

7、清除浮动Ｂug修复

　　代码示例:

　　#father {

　　　　100%;　　　　/*　宽度值可以为固定宽度值　*/

　　　　overflow:hidden;　　

　　}

　　产生条件：父元素未设置浮动，而子元素设置了浮动。

　　显示效果：父元素高度得不到扩展，缩成一条，子元素从容器中溢出。

　　解决办法：为父元素设置width：宽度值；和overflow:hidden;。