开发人员基本都知道, CSS 的开发本身并不难, 但是, 当在不同的浏览器下测试代码时, 困难就出现了. 浏览器的 bug 和不一致的显示方式, 是大多数 CSS 开发人员面临的主要难题, 你的设计在一种浏览器上看起来很好, 而在另一种浏览器上可能会支离破碎.
实践证明, CSS 的兼容性主要有两种情况: 一种是对老版本 IE 的兼容性, 一种是使用 CSS3 新特性后产生的兼容性.
对老版本 IE 的兼容性, 主要通过 CSS Hack 和客户端脚本来解决; 对使用 CSS3 新特性后产生的兼容性, 主要通过浏览器私有前缀来解决.
CSS Hack 介绍
由于不同厂商的浏览器 (如 IE,Chrome,Firefox,Safari), 或同一浏览器的不同版本 (如 IE6~IE11), 对 CSS 的解析不完全一样, 导致同一页面在不同浏览器中的效果可能不一致.
为了得到统一的效果, 就需要针对不同浏览器, 或同一浏览器的不同版本, 编写不同的 CSS, 把这个过程就被称作 CSS Hack.
实践证明, CSS Hack 主要用来解决 IE 的兼容性问题. 虽然它是强有力的工具, 但应该谨慎使用, 它一般作为修复问题的最后一道屏障, 在不得已的时候才会使用. 因为更重要的是跟踪, 隔离和识别问题, 而不是修复问题. 只有真正了解问题背后的原理, 才能找到最好的解决方案.
CSS Hack 有 3 种表现形式:
1) 属性前缀或后缀法
即在定义样式规则时, 为样式属性添加只有特定浏览器, 或某浏览器特定版本才能识别的前缀或后缀.
前缀 / 后缀 | 适用版本 | 应用示例 |
---|---|---|
_ | IE6 | p { _color: blue; } |
- | IE6 | p { -color: blue; } |
+ | IE7 | p { +color: blue; } |
* | IE6/IE7 | p { *color: blue; } |
# | IE6/IE7/IE8 | p { #color: blue; } |
!important | IE7/IE8/IE9/IE10/IE11 | p { color: blue !important; } |
\9 | IE6/IE7/IE8/IE9/IE10/IE11 | p { color: blue\9; } |
\0 | IE8/IE9/IE10/IE11 | p { color: blue\0; } |
\9\0 | IE9/IE10/IE11 | p { color: blue\9\0; } |
在使用属性前缀或后缀法时, 一般是将适用范围广, 被识别能力强的写法写在前面, 把特殊写法写在后面. 如:
- div {
- background: blue;
- background: green\9;
- *background: black;
- _background: orange;
- }
由于所有浏览器都识别标准写法, 而 IE6/IE7/IE8/IE9/IE10/IE11 可识别 \ 9,IE6/IE7 可识别 *,IE6 仅能识别_. 根据 CSS 的叠加原理, 后定义的属性会覆盖先定义的同名属性, 就实现了为 IE 各版本和现代浏览器应用不同样式的目的.
2) 选择器前缀法
即在 CSS 选择器前, 添加只有特定浏览器或某浏览器特定版本才能识别的前缀, 选择器和前缀之间用空格分隔.
常用的前缀有 *html 和 *+HTML,*HTML 是 IE6 特有的前缀, 而 *+HTML 是 IE7 特有的前缀. 如:
- *HTML p {
- color: blue;
- } /* IE6 */
- *+HTML p {
- color: blue;
- } /* IE7 */
3) 条件注释法
条件注释是 IE 浏览器专有的, 也是微软官方推荐的 Hack 方式. 它是使用 IE 条件注释, 针对不同 IE 版本, 编写不同的 CSS, 来为不同版本的 IE 应用不同的样式.
一种方法是直接在条件注释中定义样式. 如:
- <style>
- <!--[if IE 6]>
- div { display: inline; }
- <![endif]-->
- </style>
虽然这种方法可以解决一些现实的问题, 但这些注释需要放在 HTML 文件, 而不是 CSS 文件中, 样式定义散落在多个地方, 不便于维护, 也容易出错. 也违背了内容与表现相分离的原则, 故不推荐使用.
另一种方法是, 编写不同的 CSS 文件, 再使用 IE 条件注释, 通过 <link> 标签, 有针对性的加载外部样式表. 如:
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" />
<![endif]-->
这种方法却会增加 IE 用户的 HTTP 请求次数, 影响访问速度. 所以, 在使用这种方法前, 要仔细斟酌, 判断是否真的有必要在自己的网站上使用它.
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17685.html