用CSS怎么写浏览器兼容的代码?

html-css04

用CSS怎么写浏览器兼容的代码?,第1张

各浏览器兼容性css写法

/* 针对Chrome谷歌浏览器内核支持的CSS样式 */

@media screen and (-webkit-min-device-pixel-ratio:0) {

样式 /* 例如 .font1 {color:red} */

}

针对Firefox浏览器的内核CSS写法:

@-moz-document url-prefix(){

样式 /* 例如 .font1 {color:red} */

}

如果只让ie6看见用*html .head{color:#000}

如果只让ie7看见用*+html .head{color:#000}

如果只让ff看见用:root body .head{color:#000}

如果只让ff、IE8看见用html>/**/body .head{color:#000}

如果只是不让ie6看见用html>body .head{color:#000} 即对IE 6无效

如果只是不让ff、IE8看见用*body .head{color:#000}即对ff、IE8无效

针对具体属性

如果只让ie6看见用_

.head{_color:#000}

如果只让ie7看见用+与_结合的方法:

.head{+color:#f00!_color:#000}

IE8正式版hack

\9″ 例:”margin:0px auto\9”.这里的”\9″可以区别所有IE8和FireFox.

“*” IE6、IE7可以识别.IE8、FireFox不能.

“_” IE6可以识别”_”,IE7、IE8、FireFox不能.

如:

.a { color:#f00color:#f60\9 +color:#00FF00 _color:#0000FF}

从左到右分别对应 FireFoxsIE8 IE7 IE6

还有写css样式一定要记住顺序:

以下为引用的内容:

#1 { color: #333} /* Moz */

* html #1 { color: #666} /* IE6 */

*+html #1 { color: #999} /* IE7 */

1.Z-INDEX: 300

Z-INDEX 是层叠顺序,当你设置了POSITION: absolute的时候,这个层叠顺序才起作用。你有两个层一个是Z-INDEX: 299令一个是Z-INDEX: 300那么Z-INDEX: 300的会覆盖在上边。

2.. POSITION: absolute

这个就是绝对定位。

3. 当你设置了绝对定位以后,你必须给这个层设置它的位置,如果你不设置的话,他就会出现在浏览器给他的默认位置,而每个浏览器设置的默认位置是不同的,所以你需要给他一个确定的TOP 和 LEFT位置,在所有浏览器下就能出现在固定位置了。也就是你说的兼容了。