FF,chrome,ie主流浏览器兼容写法总结

现在主流浏览器就是火狐,谷歌,还有ie,这里总结一下我测试过的能很好的兼容各个浏览器的写法:
我们知道样式书写要从高版本的写到低版本,我一般是先写FF,谷歌这些浏览器的样式,再写兼容ie9-ie6的样式。现在ie10也出来,不过目前我还没有使用,市场份额也很小,应该和ie9差不多,这里暂时就不考虑了。

background:red;background:green\9;  前者火狐,谷歌等识别,后者ie各版本浏览器识别
background:red;background:yellow\0;*background:blue ; 前者火狐,谷歌等识别,中间ie8和ie9识别,后者ie7和ie6识别
*background:blue ;_background:#000; 前者ie7支持,后者ie6支持
background:gray!important;除了ie6,其他浏览器都支持。

如果给各个浏览器都写一个不一样的效果就是:

<html>
<head>
<title>无标题文档</title>
<style type="text/css">
.bg{width:100px;height:100px;background:red;background:green\0;*background:yellow;_background:blue;}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
 
========================================================
补充:今天偶然发现了一个更全的兼容写法,大家一起学习下:

.bg{background:#000;}          /*所有浏览器都识别,但是在此段中只有标准浏览器ff、chrome等是黑色*/
:root .bg{background:orange\0;}   /*这段只有ie9、ie10pp4为橙色,注意一定要加\0,否则准浏览器也会为橙色。因为:root不仅标准浏览器支持,ie里面ie9和ie10pp4也支持*/
.bg{background:green\0;}       /*ie8、ie9、ie10pp4都支持,但是此段中只有ie8会是绿色*/
.bg{*background:blue;}          /*ie6、ie7支持,此段中只有ie7是蓝色*/
.bg{_background:red;}           /*只有ie6支持*/

=========================================================

此处还有大漠更全的兼容hack写法:http://www.w3cplus.com/css/create-css-browers-hacks

浏览器内核分类:

1、ie浏览器----内核trident  :使用trident渲染内核的浏览器还有360、遨游、搜狗、腾讯tt、世界之窗。。。

2、firefox浏览器--内核Gecko

3、chrome 和 safari---内核webkit

4、opera--内核presto  

posted @ 2012-05-28 21:31  sheena的世界  阅读(478)  评论(0编辑  收藏  举报