以下是如何处理三种不同的浏览器:IE,FF和Chrome

以下是一些仅针对Firefox浏览器的浏览器黑客,

使用选择器黑客.

_:-moz-tree-row(hover), .selector {}

JavaScript Hacks

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

媒体查询黑客

这将是适用的,Firefox 3.6及更高版本

@media screen and (-moz-images-in-menus:0) {}

如果您需要更多信息,请访问browserhacks

首先,免责声明.我并不是真的提倡我在下面提出的解决方案.我写的唯一浏览器特定的CSS是针对IE(特别是IE6),虽然我希望情况并非如此.

现在,解决方案.你问它优雅,所以我不知道它有多优雅,但它肯定只会针对Gecko平台.

诀窍只有在启用JavaScript时才能使用,并且使用Mozilla绑定(XBL),这些绑定在Firefox内部和所有其他基于Gecko的产品中大量使用.为了进行比较,这就像IE中的行为CSS属性,但功能更强大.

我的解决方案涉及三个文件:

ff.html:要设置样式的文件

ff.xml:包含Gecko绑定的文件

ff.css:Firefox特有的样式

ff.html

This should be red in FF

ff.xml

ff.css

h1 {
 color: red;
}

更新: 以上解决方案并不是那么好.它会更好,如果不是追加一个新的LINK元素,它将增加该 body元素的"火狐"级.并且可以通过以下方式替换上面的JS:

this.className += " firefox";

解决方案的灵感来自Dean Edwards的moz行为.

使用-engine特定规则可确保有效的浏览器定位.

//Internet Explorer

您的想法的一个变体是有一个server-side USER-AGENT detector将确定要附加到页面的样式表.这样你就可以了firefox.css, ie.css, opera.css, etc.

你可以在Javascript中完成类似的事情,虽然你可能不认为它是干净的.

我已经做了类似的事情default.css,包括all common styles and then specific style sheets添加了覆盖,或增强默认值.

现在，Firefox Quantum 57对Gecko（称为Stylo或Quantum CSS）进行了实质性的改进，并且有可能突破性的改进，您可能会发现自己必须区分Firefox的旧版本和Firefox Quantum。

从我的回答这里：

你可以用@supports与calc(0s)结合表达@-moz-document，以测试柱花草-壁虎不支持时间值calc()表达式，但柱花草的作用：

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

这是一个概念证明：

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}