三分钟速记CSS兼容写法

CSS兼容浏览器的写法

主要是坑爹的IE浏览器，身为前端开发在写PC端项目的时候，需要在CSS样式上进行最基本最简单的样式适配的方法，这些也是必要掌握的。

---

前言

本篇文章主要总结了简单的及常用的CSS样式的兼容写法。

---

一、兼容不同浏览器

1、针对不同内核基本的浏览器的兼容写法

-webkit-：safari、chrome
-moz-   ：firefox
-ms-    ：ie
-o-     ：Opera

示例：

.div{
    
    
	-webkit-animation:;
	-o-animation:;
	-moz-animation:;
	-ms-flex:;
}

关于浏览器内核方面请看此详细文章---->

二、CSS Hack

1、什么是hack

百科：
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样。

简单的说，CSS hack就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

示例：

IE6能识别下划线"_"和星号"*"，IE7能识别星号"*"，但不能识别下划线"_"，而firefox两个都不能认识。
慎用\0 Hack
.css-hack {
    
    
    color: red; /* 其他浏览器显示红色 */
    color: blue\0; /* IE8、IE9 显示蓝色 */
    +color: green; /* IE7 显示绿色 */
    _color: brown; /* IE6 显示棕色 */}
.css-hack {
    
    
    color: red; /* 其他浏览器显示红色 */
    color: blue\0; /* IE8、IE9 显示蓝色 */
}
大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持。
\9    ：所有IE浏览器都支持
_和-  ：仅IE6支持
*     ：IE6、E7支持
\0    ：IE8、IE9支持，opera部分支持
\9\0  ：IE8部分支持、IE9支持
\0\9  ：IE8、IE9支持

补充：

例如：
区别IE6与firefox：
	background:orange;
	*background:blue;

区别IE6与IE7：
	background:green!important;
	background:blue;

区别IE7与firefox：
	background:orange;
	*background:green;

区别firefox，IE7，IE6：
	background:orange;
	*background:green;
	_background:blue;
	background:orange;
	*background:green!important;
	*background:blue;
注：IE都能识别*;标准浏览器(如firefox)不能识别*；

IE6能识别*；不能识别 !important;
IE7能识别*，能识别!important;
FF不能识别*，但能识别!important;

             IE6   IE7	FireFox
*	         √	    √	  ×
!important   ×	    √	  √

注意：最后书写顺序因该是兼容firefox的写在前面，ie6写在最后。

---

总结

总结的不是非常详细，但是也比较够用，个人觉得虽然很少用到，但是也需要有一定的了解。并且如果必要的时候可以对照着写。
如有错误欢迎指正，非常感谢。