浏览器的兼容性问题是 web 前端开发人员经常会碰到的和必须要解决的问题. 那么 CSS 不同浏览器兼容性问题怎么解决? 下面本篇文章就来给大家介绍一下, 希望对大家有所帮助.
CSS 不同浏览器兼容性问题的解决方案
1. 浏览器 CSS 样式初始化
由于每个浏览器的 CSS 默认样式不尽相同, 所以最简单有效的方式就是对其进行初始化, 相信很多朋友都写过这样的代码, 在所有 CSS 开始前, 先把 marin 和 padding 都设为 0, 以防不同浏览器的显示效果不一样.
- *{
- margin: 0;
- padding: 0;
- }
关于浏览器 CSS 样式初始化, 经验不丰富的话, 可能也不知道该初始化什么, 这里给大家推荐一个库, Normalize.CSS,GitHub star 数量接近 4 万, 选取展示其中几个样式设置, 如下
- html {
- line-height: 1.15; /* Correct the line height in all browsers */
- -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
- }
- body {
- margin: 0;
- }
- a {
- background-color: transparent; /* Remove the gray background on active links in IE 10. */
- }
- img {
- border-style: none; /* Remove the border on images inside links in IE 10. */
- }
通过 CSS 样式初始化, 相信能解决不少常规的兼容性问题, 接下来再看看浏览器的私有属性.
2. 浏览器私有属性
我们经常会在某个 CSS 的属性前添加一些前缀, 比如 - webkit- ,-moz- ,-ms-, 这些就是浏览器的私有属性.
为什么会出现私有属性呢? 这是因为制定 HTML 和 CSS 标准的组织 W3C 动作是很慢的.
通常, 有 W3C 组织成员提出一个新属性, 比如说圆角 border-radius, 大家都觉得好, 但 W3C 制定标准, 要走很复杂的程序, 审查等. 而浏览器商市场推广时间紧, 如果一个属性已经够成熟了, 就会在浏览器中加入支持.
但是为避免日后 W3C 公布标准时有所变更, 会加入一个私有前缀, 比如 - webkit-border-radius, 通过这种方式来提前支持新属性. 等到日后 W3C 公布了标准, border-radius 的标准写法确立之后, 再让新版的浏览器支持 border-radius 这种写法. 常用的前缀有:
-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);
每个 CSS 属性写这么一堆兼容性代码, 无疑是对生命最大的浪费, 后面我们会讲一下通过自动化插件来处理这块.
3. CSS hack
有时我们需要针对不同的浏览器或不同版本写特定的 CSS 样式, 这种针对不同的浏览器 / 不同版本写相应的 CSS code 的过程, 叫做 CSS hack!
CSS hack 的写法大致归纳为 3 种: 条件 hack, 属性级 hack, 选择符级 hack.
条件 hack
条件 hack 主要针对 IE 浏览器进行一些特殊的设置
语法:
<!--[if <keywords>? IE <version>?]>
代码块, 可以是 html,css,js
<![endif]-->
取值
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]-->
属性级 hack
属性 hack 就是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀.
语法:
selector{<hack>?property:value<hack>?;}
取值:
_: 选择 IE6 及以下. 连接线 (中划线)(-) 亦可使用, 为了避免与某些带中划线的属性混淆, 所以使用下划线 (_) 更为合适.
*: 选择 IE7 及以下. 诸如:(+)与 (#) 之类的均可使用, 不过业界对 (*) 的认知度更高
9: 选择 IE6+
0: 选择 IE8 + 和 Opera15 以下的浏览器
举例
如在不同的 IE 浏览器中设置不同的颜色, 注意顺序: 低版本的兼容性写法放到最后
- .test {
- color: #090\9; /* For IE8+ */
- *color: #f00; /* For IE7 and earlier */
- _color: #ff0; /* For IE6 and earlier */
- }
选择符级 hack
选择符级 hack 是针对一些页面表现不一致或者需要特殊对待的浏览器, 在 CSS 选择器前加上一些只有某些特定浏览器才能识别的前缀进行 hack.
语法:
<hack> selector{ sRules }
取值:
常见的选择符级 hack 有
*HTML * 前缀只对 IE6 生效
*+HTML *+ 前缀只对 IE7 生效
@media screen\9{...}只对 IE6/7 生效
@media \0screen {body { background: red; }}只对 IE8 有效
@media \0screen\,screen\9{body { background: blue; }}只对 IE6/7/8 有效
@media screen\0 {body { background: green; }} 只对 IE8/9/10 有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对 IE9/10 有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对 IE10 有效
举例:
- * HTML .test {
- color: #090;
- } /* For IE6 and earlier */
- * + HTML .test {
- color: #ff0;
- } /* For IE7 */
看到这里, 我不得不为前端人员自豪, 这也太难了吧~~
不过花大力气解决这些兼容性问题, 并不能给我们技术上带来什么大的提升, 无非是给各个浏览器厂商填坑罢了, 随着时间的流逝, 这些技术的价值也会越来越小, 怎么花最小的力气解决 CSS 兼容性问题, 让我们把更多的时间留给美好的生活, 才是关键, 好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理.
4. 自动化插件
Autoprefixer 是一款自动管理浏览器前缀的插件, 它可以解析 CSS 文件并且添加浏览器前缀到 CSS 内容里, 使用 Can I Use(caniuse 网站)的数据来决定哪些前缀是需要的.
把 Autoprefixe 添加到资源构建工具 (例如 Grunt) 后, 可以完全忘记有关 CSS 前缀的东西, 只需按照最新的 W3C 规范来正常书写 CSS 即可. 如果项目需要支持旧版浏览器, 可修改 browsers 参数设置 .
- // 我们编写的代码
- 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 都有相应的插件, 如果还没有使用, 那就赶紧应用到我们的项目中吧, 别再让 CSS 兼容性浪费你的时间!
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/15024.html