css兼容

在csss使用中我们发现会用一些兼容些问题，尤其在IE上表现的最为突出，毕竟IE人神共愤呀,一般我们大多数人会使用CSShack

很多人会想到用前缀这种：

-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */

类似上面这种，但在操作中发现并不是很好用，只能解决很少部分不兼容

1、首先是火狐的兼容

@-moz-document url-prefix() { .selector { property: value; } }

这是仅被火狐识别的标示，其中方法细分还有很多，不过这个我感觉是最常用的。

2、使用webkit的游览器比如chrome and safari

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }

3、Opera浏览器

 @media all and (min-0) { Selector {property: value;} }

4、IE游览器

首先是添加头部

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />

类似这种头部网上有很多，大概意思就是让按规定的版本进行解析，效果还是非常好的，对于剩下有的小细节我一般三种：

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"9"，但firefox前述三个都不能认识。

选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

方法不多，不过够用就行了，IE的在我遇到的问题中条件注释法没用不知道是为什么。。。。可能人品太差了^-^