CSS兼容浏览器的写法
主要是坑爹的IE浏览器,身为前端开发在写PC端项目的时候,需要在CSS样式上进行最基本最简单的样式适配的方法,这些也是必要掌握的。
前言
本篇文章主要总结了简单的及常用的CSS样式的兼容写法。
一、兼容不同浏览器
1、针对不同内核基本的浏览器的兼容写法
-webkit-:safari、chrome
-moz- :firefox
-ms- :ie
-o- :Opera
示例:
.div{
-webkit-animation:;
-o-animation:;
-moz-animation:;
-ms-flex:;
}
二、CSS Hack
1、什么是hack
百科:
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样。
简单的说,CSS hack就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
示例:
IE6能识别下划线"_"和星号"*",IE7能识别星号"*",但不能识别下划线"_",而firefox两个都不能认识。
慎用\0 Hack
.css-hack {
color: red; /* 其他浏览器显示红色 */
color: blue\0; /* IE8、IE9 显示蓝色 */
+color: green; /* IE7 显示绿色 */
_color: brown; /* IE6 显示棕色 */}
.css-hack {
color: red; /* 其他浏览器显示红色 */
color: blue\0; /* IE8、IE9 显示蓝色 */
}
大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持。
\9 :所有IE浏览器都支持
_和- :仅IE6支持
* :IE6、E7支持
\0 :IE8、IE9支持,opera部分支持
\9\0 :IE8部分支持、IE9支持
\0\9 :IE8、IE9支持
补充:
例如:
区别IE6与firefox:
background:orange;
*background:blue;
区别IE6与IE7:
background:green!important;
background:blue;
区别IE7与firefox:
background:orange;
*background:green;
区别firefox,IE7,IE6:
background:orange;
*background:green;
_background:blue;
background:orange;
*background:green!important;
*background:blue;
注:IE都能识别*;标准浏览器(如firefox)不能识别*;
IE6能识别*;不能识别 !important;
IE7能识别*,能识别!important;
FF不能识别*,但能识别!important;
IE6 IE7 FireFox
* √ √ ×
!important × √ √
注意:最后书写顺序因该是兼容firefox的写在前面,ie6写在最后。
总结
总结的不是非常详细,但是也比较够用,个人觉得虽然很少用到,但是也需要有一定的了解。并且如果必要的时候可以对照着写。
如有错误欢迎指正,非常感谢。