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-width: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的在我遇到的问题中条件注释法没用不知道是为什么。。。。可能人品太差了^-^

posted @ 2017-06-11 19:46  ABC袁  阅读(121)  评论(0编辑  收藏  举报