CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

CSS Hack 是一种用于区分不同浏览器的技术。由于不同浏览器对 CSS 的支持程度不同，因此我们需要使用 CSS Hack 来针对不同浏览器应用不同的样式。下面是一个完整攻略，包含了如何使用 CSS Hack 区分出 IE6-IE10、FireFox、Chrome、Opera 的过程和两个示例说明。

CSS Hack 大全

IE6-IE10

IE6

* html .selector {
  /* IE6-specific style */
}

IE7

*:first-child+html .selector {
  /* IE7-specific style */
}

IE8

html>/**/body .selector {
  /* IE8-specific style */
}

IE9

:root .selector {
  /* IE9-specific style */
}

IE10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10-specific style */
}

FireFox

@-moz-document url-prefix() {
  /* FireFox-specific style */
}

Chrome 和 Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Chrome and Safari-specific style */
}

Opera

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  /* Opera-specific style */
}

示例说明

下面是两个示例，演示如何使用 CSS Hack 区分出不同浏览器并应用不同的样式。

示例一：针对 IE6 应用特定样式

* html .box {
  background-color: #ccc;
  width: 200px;
  height: 200px;
}

上述代码中，我们使用 CSS Hack 针对 IE6 应用特定样式。我们使用“* html”选择器来选择 IE6 中的元素，并为其应用样式。

示例二：针对 FireFox 应用特定样式

@-moz-document url-prefix() {
  .box {
    background-color: #ccc;
    width: 200px;
    height: 200px;
  }
}

上述代码中，我们使用 CSS Hack 针对 FireFox 应用特定样式。我们使用“@-moz-document url-prefix()”选择器来选择 FireFox 中的元素，并为其应用样式。注意，这个选择器只能在 FireFox 中使用。