仅针对带有 CSS 的 Firefox [英] Targeting only Firefox with CSS

问题描述

使用条件注释很容易针对具有浏览器特定 CSS 规则的 Internet Explorer:

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

有时是 Gecko 引擎 (Firefox) 出现问题.使用 CSS 规则仅针对 Firefox 而不是其他浏览器的最佳方法是什么?也就是说，Internet Explorer 不仅应该忽略 Firefox 专用规则，WebKit 和 Opera 也应该忽略.

Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

注意:我正在寻找一种干净"的解决方案.在我看来，使用 JavaScript 浏览器嗅探器将firefox"类添加到我的 HTML 并不符合标准.我更愿意看到一些依赖于浏览器功能的东西，就像条件注释只是 IE 的特殊"......

Note: I'm looking for a 'clean' solution. Using a JavaScript browser sniffer to add a 'firefox' class to my HTML does not qualify as clean in my opinion. I would rather like to see something that depends on browser capabilities, much like conditional comments are only 'special' to IE…

推荐答案

好的，我找到了.这可能是目前最简洁、最简单的解决方案，并且不依赖于 JavaScript 的开启.

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

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

<h1>This should be red in FF</h1>

它基于另一个 Mozilla 特定的 CSS 扩展.这些 CSS 扩展的完整列表就在这里:Mozilla CSS 扩展.

It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: Mozilla CSS Extensions.

这篇关于仅针对带有 CSS 的 Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！