使用 css 定位特定浏览器答案

【问题标题】：targeting a specific browser with css使用 css 定位特定浏览器
【发布时间】：2014-07-16 03:38:47
【问题描述】：

我猜firefox 是唯一不支持“Arial Narrow”字体的浏览器。其他浏览器不支持“font-stretch”属性。如何使用 CSS 定位特定浏览器？我已经这样做了：

@-moz-document url-prefix() {
    h2 {
  font-family:"Arial";
  font-stretch: condensed;
    }
    .header_p {
  font-family: "Arial";
  font-stretch: condensed;
}

}
h2{
 font-family:"Arial Narrow";
 font-size: 22px;
 letter-spacing: 0px;
}

.header_p {
 font-family: "Arial Narrow";
}

它不工作，我不知道为什么..

如果我交换顺序以使 @-moz 部分排在第二位，则 chrome 将停止工作。我猜它正在尝试应用@-moz 规则

而且 IE 根本不读取 CSS

【问题讨论】：

在我的 Chrome 34、IE 11 和 FF 29 中运行良好：jsfiddle.net/abhitalks/eRquy
谢谢。我实际上遗漏了一个大括号，我看到有人对其进行了编辑。现在它确实起作用了

标签： css firefox cross-browser

【解决方案1】：

来自怀念的H Open Magazine：

CSS3 包含a font module，它提供了一个@font-face 声明，允许Web 开发人员加载字体以确保他们的网站以正确的字体显示。 WOFF 是这些字体的数据格式。

一种专门为网络设计的文件格式，它是一个容器，除了 sfnt 格式的（可选压缩的）字体表外，还可以包含元数据，例如许可或其他信息。

Browser support 几乎是通用的。

这里是an example of how to use them。

这有帮助吗？

【讨论】：

【解决方案2】：

我不确定 Firefox 是否支持该字体系列，但您可以使用

仅定位 firefox

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

查看完整文档here

您可以将 IE 定位为

<!--[if IE]>
  // Your css for IE or   
  // Perhaps importing a specific style sheet as
  <link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->

仅针对 chrome

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 div{
      color: red;
    } 
}

【讨论】：

【解决方案3】：

你可以试试下面的sn-p。

  h2 {
        font-family: "Arial Narrow";
        font-size: 22px;
        letter-spacing: 0px;
    }

    .header_p {
        font-family: "Arial Narrow";
    }

    h2, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;
    }

    .header_p, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;
    }

【讨论】：