CSS浏览器兼容性问题

CSS浏览器兼容性问题

1、浏览器CSS样式初始化

最简单的初始化方法就是：使用通配符（*），重置所有的初始样式。

*{
    margin: 0;
    padding: 0;
}
/* 10px=1rem */
html {
    overflow-y:scroll;
    font-size:62.5%;
}
a{
	text-decoration:none;
}
a:hover { 
   text-decoration:none; 
}

img {
    border-style: none; 
}

ul,ol,li{
    list-style:none;
} 

select,input,img,select,button{
    vertical-align:middle;
} 

2、浏览器私有属性

常用的前缀有：

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera私有属性

对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); 

3、CSS hack

keywords

if后面跟的条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：指定是否IE或IE某个版本。关键字：空

大于：选择大于指定版本的IE版本。关键字：gt（greater than）

大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）

小于：选择小于指定版本的IE版本。关键字：lt（less than）

小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）

非指定版本：选择除指定版本外的所有IE版本。关键字：!

version

IE浏览器版本，如6、7、8

IE10及以上版本已将条件注释特性移除，使用时需注意。

<!--[if IE]>
    <p>你在非IE中将看不到我的身影</p>
<![endif]-->
 
<!--[if IE]>
<style>
    .test{color:red;}
</style>
<![endif]-->
 
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

这样就不一用这里一个兼容性属性，那里一个兼容性属性啦。

4、自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

//我们编写的代码
div {
  transform: rotate(30deg);
}
 
//自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置div {
  -ms-transform: rotate(30deg);       
  -webkit-transform: rotate(30deg);    
  -o-transform: rotate(30deg);    
  -moz-transform: rotate(30deg);      
  transform: rotate(30deg);

目前webpack、gulp、grunt都有相应的插件，可以自动生成兼容性代码。

webpack详细使用方法请看这里：webpack笔记