css IE6/7/8/9、Firefox、Chrome的CSS Hack方法

时间：

分类：

css

字数：

333 字

时长：

大约需要 1 分钟

次数：

0 人阅读

在古老的 IE 时代，为兼容不同浏览器，神奇的前端大佬们，开发出了 css 的各种 hack 写法。

写法

  • “\9” 被 所有IE 识别；
  • “\0” 被 IE8-9 识别；
  • “*” 只被 IE7/IE6 识别；
  • “+” 只被IE7识别；
  • “_” 只被IE6识别；
  • webkit专属的Hack： @media screen and (-webkit-min-device-pixel-ratio:0) {}
  • Firefox专属的Hack：@-moz-document url-prefix() {}

示例

example.html

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE 6/7/8/9、Firefox、Chrome的CSS Hack方法</title>
  <style type="text/css">
    pre {
      color: #666;
    }
    p {
      color: red; /* 默认红色 */
      color: green\9; /* 所有 IE */
      color: lime\0; /* IE8-9 */
      *color: yellow; /* IE6-7 */
      +color: blue; /* IE7 */
      _color: orange; /* IE6 */
    }
    /* webkit */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      p {
        color: #369;
      }
    }
    /* firefox */
    @-moz-document url-prefix() {
      p {
        color:#933;
      }
    }
  </style>
</head>

<body>
  <p>
    测试文本，不同浏览器显示不同颜色
  </p>
  <pre>
    1、"\9" 被 所有IE 识别；
    2、"\0" 被 IE8-9 识别；
    3、"*" 只被 IE7/IE6 识别；
    4、"+" 只被IE7识别；
    5、"_" 只被IE6识别；
    6、 webkit @media screen and (-webkit-min-device-pixel-ratio:0) {}
    7、Firefox专属的Hack：@-moz-document url-prefix() {}
  </pre>
</body>

</html>
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-03-17/css-hack/

如果您觉得文章不错，可以点击文章中的广告支持一下！