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都有相应的插件,可以自动生成兼容性代码
。