CSS hack

浏览器兼容问题一直是前段开发工程师比较头痛的问题，熟悉了里面的规则也就变得简单了，这里有一份资料可以分享给大家，大家平时开发过程中遵循这个规律的话，会变得轻松多了

CSS Hack 浏览器兼容速查表

一、什么是 CSS Hack？

由于不同浏览器（IE6、IE7、IE8、Firefox、Chrome、Safari 等）对 CSS 的解析规则不同，会导致页面渲染效果不一致。针对不同浏览器编写专属 CSS 代码，以保证页面在各浏览器中呈现预期效果的过程，称为 CSS Hack。

二、各浏览器 CSS Hack 兼容表

Hack 写法 IE6 IE7 IE8 Firefox Chrome Safari
!important Y Y - Y Y Y
_属性名 Y - - - - -
*属性名 Y Y - - - -
*+属性名 - Y - - - -
属性名9 Y Y Y - - -
nth-of-type(1) - - Y Y Y Y

三、核心代码示例

基础兼容写法

1
2
3
4
5
6
7
8
9
#test {
  color: red; /* 所有浏览器都支持 */
  color: red !important; /* Firefox、IE7 支持 */
  _color: red; /* IE6 支持 */
  *color: red; /* IE6、IE7 支持 */
  *+color: red; /* IE7 支持 */
  color: red9; /* IE6、IE7、IE8 支持 */
  color: red\0; /* IE8 支持 */
}

综合测试示例

1
2
3
4
.test {
  color: #000000; /* 基础样式（所有浏览器） */
  color: #0000FF\0; /* IE8 支持 */
  [color: #00FF00; /* Firefox 等非IE浏览器 */  *color: #FFFF00; /* IE6、IE7 支持 */  _color: #FF0000; /* IE6 支持 */}

四、补充说明

1. IE8 快速兼容方案

若页面已兼容 IE7，只需在 HTML 头部添加以下代码，即可让 IE8 以 IE7 模式渲染页面：

1
<meta http-equiv="x-ua-compatible" content="ie=7" />

2. 选择器级 Hack 写法

  • *html #test {}：仅 IE6 识别
  • *+html #test {}：仅 IE7 识别（需保证 HTML 顶部声明 http://www.w3.org/TR/html4/loose.dtd）

3. Hack 编写顺序建议

按「Firefox → IE8 → IE7 → IE6」的顺序编写，避免样式覆盖：

1
2
3
4
5
6
7
8
9
10
/* Firefox */
color: red !important;
/* IE8 */
color: red\0;
/* IE7 */
*+color: red;
/* IE6、IE7 */
*color: red;
/* IE6 */
_color: red;

4. nth-of-type(1) 用法说明

body:nth-of-type(1) p { color: red; }：全局匹配第一个 body 下的 p 标签，兼容 Chrome、Safari、Firefox、IE8+。

五、关键注意事项

  1. *+html 针对 IE7 的 Hack 生效前提：HTML 顶部必须声明 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Loose//EN" "http://www.w3.org/TR/html4/loose.dtd">；
  2. \0 是 IE8 专属 Hack 写法，补充于基础示例中；
  3. Hack 仅作为兼容兜底方案，优先使用 W3C 标准写法，减少 Hack 依赖。
学无止境
CSS hack
https://cszy.top/2015-03-03 css-hack/
作者
csorz
发布于
2015年3月3日
许可协议