电影网站做流量,继续访问浏览器,手机app设计软件,百度代理服务器CSS浏览器兼容性问题
1、浏览器CSS样式初始化
最简单的初始化方法就是#xff1a;使用通配符#xff08;*#xff09;#xff0c;重置所有的初始样式。
*{margin: 0;padding: 0;
}
/* 10px1rem */
html {overflow-y:scroll;font-size:62.5%;
}
a{text-decoration:none;
…CSS浏览器兼容性问题
1、浏览器CSS样式初始化
最简单的初始化方法就是使用通配符*重置所有的初始样式。
*{margin: 0;padding: 0;
}
/* 10px1rem */
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版本。关键字gtgreater than
大于或等于选择大于或等于指定版本的IE版本。关键字gtegreater than or equal
小于选择小于指定版本的IE版本。关键字ltless than
小于或等于选择小于或等于指定版本的IE版本。关键字lteless 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/scriptscript src//cdn.bootcss.com/respond.js/1.4.2/respond.min.js/script
![endif]--这样就不一用这里一个兼容性属性那里一个兼容性属性啦。
4、自动化插件
Autoprefixer是一款自动管理浏览器前缀的插件它可以解析CSS文件并且添加浏览器前缀到CSS内容里使用Can I Usecaniuse网站的数据来决定哪些前缀是需要的。
//我们编写的代码
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笔记
