为什么我们需要为Firefox、IE6、IE7和IE8编写特定的CSS样式黑客代码？

css，/* Firefox */，@-moz-document url-prefix() {，  .selector {，    /* Firefox-specific styles */，  }，}，，/* IE6 and below */，.selector {，  /* IE6-specific styles */，  *html .selector {，    /* IE6-specific styles */，  }，}，，/* IE7 */，*:first-child+html .selector {，  /* IE7-specific styles */，}，，/* IE8 */，html>/**/body .selector {，  /* IE8-specific styles */，}，

`，，请将 .selector` 替换为您要应用样式的元素或类选择器。在每个注释中添加您想要应用的特定于浏览器的样式。

Firefox, IE6, IE7, IE8的CSS样式hack

一：CSS Hack 基本概念

CSS Hack 是针对不同浏览器对 CSS 解析结果不同的问题，通过在 CSS 样式中加入特殊符号或条件注释，让不同浏览器识别不同的样式规则，从而实现兼容多种浏览器的效果，常见的 CSS Hack 形式包括属性级 Hack、选择符级 Hack 和 IE 条件注释 Hack。

二：针对 Firefox 的 CSS Hack

Firefox 支持标准的 CSS 代码，但为了确保特定版本的兼容性，可以使用以下方法：

选择器	CSS 属性	Firefox 版本	IE 版本	Chrome	Safari	Opera
`.selector`	`color: lime;`	所有	不支持	支持	支持	支持
`@-moz-document url-prefix()`	`.selector { color: lime; }`	仅 Firefox	不支持	支持	支持	支持

示例：

@-moz-document url-prefix() {
  .demo {
    color: lime;
  }
}

三：针对 IE6 的 CSS Hack

IE6 可以通过识别特定的前缀和后缀来实现 Hack：

选择器	CSS 属性	Firefox 版本	IE 版本	Chrome	Safari	Opera
`.selector`	`_color: red;`	不支持	IE6	不支持	不支持	不支持
`.selector`	`*color: red;`	不支持	IE6/IE7	不支持	不支持	不支持

示例：

.selector {
  color: green;
  _color: red; /* IE6 only */
  *color: red; /* IE6 and IE7 */
}

四：针对 IE7 的 CSS Hack

为什么我们需要为Firefox、IE6、IE7和IE8编写特定的CSS样式黑客代码？

IE7 可以通过识别特定的前缀和后缀来实现 Hack：

选择器	CSS 属性	Firefox 版本	IE 版本	Chrome	Safari	Opera
`.selector`	`+color: blue;`	不支持	IE7	不支持	不支持	不支持
`.selector`	`*color: blue !important;`	不支持	IE7/IE6	不支持	不支持	不支持

示例：

.selector {
  color: green;
  +color: blue; /* IE7 only */
  *color: blue !important; /* IE7 and IE6 */
}

五：针对 IE8 的 CSS Hack

IE8 可以通过识别特定的前缀和后缀来实现 Hack：

选择器	CSS 属性	Firefox 版本	IE 版本	Chrome	Safari	Opera
`.selector`	`\0color: purple;`	不支持	IE8	不支持	不支持	不支持
`.selector`	`*color: purple;`	不支持	IE8/IE7/IE6	不支持	不支持	不支持

示例：

.selector {
  color: green;
  \0color: purple; /* IE8 only */
  *color: purple; /* IE8, IE7, and IE6 */
}