使用条件注释很容易针对Internet Explorer浏览器特定的CSS规则:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
有时是Gecko引擎(Firefox)行为不当。将CSS规则只针对Firefox而不是其他浏览器的最佳方法是什么?也就是说，不仅Internet Explorer应该忽略仅限于firefox的规则，WebKit和Opera也应该忽略。
注:我正在寻找一个“干净”的解决方案。在我看来，使用JavaScript浏览器嗅探器向我的HTML中添加一个“firefox”类并不算干净。我更希望看到一些依赖于浏览器功能的东西，就像条件注释只对IE来说是“特殊的”……
您的想法的另一种变体是有一个服务器端USER-AGENT检测器，它将找出要附加到页面的样式表。这样你就可以有firefox.css, ie.css, opera.css等等。
你可以在Javascript中完成类似的事情，尽管你可能不认为它是干净的。
我做了类似的事情，有一个default.css，其中包括所有常见的样式，然后添加特定的样式表来覆盖或增强默认值。
首先，免责声明。我并不提倡下面的解决方案。我写的唯一针对浏览器的CSS是针对IE(尤其是IE6)的，尽管我希望不是这样。
现在是解决方案。你要求它很优雅，所以我不知道它有多优雅，但它肯定只针对Gecko平台。
这个技巧只有在启用JavaScript并使用Mozilla绑定(XBL)时才有效，Mozilla绑定在Firefox和所有其他基于gecko的产品内部大量使用。作为比较，这类似于IE中的CSS属性，但更强大。
我的解决方案涉及三个文件:
Ff.html:要设置样式的文件 xml:包含Gecko绑定的文件 css: Firefox特定的样式
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
更新: 上面的解决方案不是那么好。如果不是追加一个新的LINK元素，而是在BODY元素上添加“firefox”类会更好。这是可能的，只需将上面的JS替换为以下内容:
this.className += " firefox";
解决方案的灵感来自于Dean Edwards的moz-behaviors。
此解决方案不依赖于打开JavaScript。
@-moz-document url-prefix() { h1 { 颜色:红色; ｝ ｝ <h1>这应该是FF</h1>中的红色
它基于另一个Mozilla特定的css扩展。这里有一个完整的CSS扩展列表:
Mozilla CSS扩展。机场当局请注意，它们大多已弃用!
有关这个特定的css扩展的更多信息，请参阅这个问题:@-moz-document url-prefix()做什么?
下面是如何处理三种不同的浏览器:IE, FF和Chrome
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
以下是针对Firefox浏览器的一些浏览器技巧，
使用选择器hacks。
_:-moz-tree-row(hover), .selector {}
JavaScript黑客
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
使用特定于引擎的规则可以确保有效的浏览器定位。
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
@media screen and (-webkit-min-device-pixel-ratio:0) {
color:green;
}
//Firefox
@media screen and (-moz-images-in-menus:0) {
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
更新(来自@Antoine comment)
你可以使用@supports
@supports (-moz-appearance:none) { H1{颜色:红色;｝ ｝ <h1>这应该是FF</h1>中的红色
更多关于@supports的信息请点击这里
下面的代码倾向于抛出Style lint警告:
@-moz-document url-prefix() {
h1 {
color: red;
}
}
而不是使用
@-moz-document url-prefix('') {
h1 {
color: red;
}
}
帮了我一把!从这里得到了解决时尚棉绒警告的方法
现在，Firefox Quantum 57已经推出了对Gecko的重大改进(统称Stylo或Quantum CSS)，您可能会发现自己处于必须区分遗留版本的Firefox和Firefox Quantum的情况。
从我的回答来看:
You can use @supports with a calc(0s) expression in conjunction with @-moz-document to test for Stylo — Gecko does not support time values in calc() expressions but Stylo does: @-moz-document url-prefix() { @supports (animation: calc(0s)) { /* Stylo */ } } Here's a proof-of-concept: body::before { content: 'Not Fx'; } @-moz-document url-prefix() { body::before { content: 'Fx legacy'; } @supports (animation: calc(0s)) { body::before { content: 'Fx Quantum'; } } } Targeting legacy versions of Firefox is a little tricky — if you're only interested in versions that support @supports, which is Fx 22 and up, @supports not (animation: calc(0s)) is all you need: @-moz-document url-prefix() { @supports not (animation: calc(0s)) { /* Gecko */ } } ... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.
CSS支持可以从JavaScript中使用。
如果(CSS)。Supports ("(-moz-user-select:unset)")) { console.log(“火狐! !”) ｝
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
带有-moz前缀
div:-moz-read-only {
background: green;
}
textarea:-moz-read-write {
background: green;
}
:-moz-any(div#foo) div.bar {
background: green;
}
li:-moz-first-node, li:-moz-last-node {
background: green;
}
如何应用CSS只Firefox
下面的解决方案为您提供了在更广泛的Firefox浏览器版本中仅支持Firefox的CSS…
@supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}
早在2006年，Mozilla/Firefox就支持-moz-appearance:按钮。但是@supports规则直到2019年才被支持，所以那将是最早支持该规则的Firefox浏览器。include:paint将Safari浏览器排除在规则之外。Internet Explorer和早期的Trident Edge浏览器不支持@supports，因此也被排除在CSS规则之外。没有已知的Chrome浏览器应该支持-moz-appearance:按钮，所以排除。
一如既往，我所有的CSS解决方案都是100% javascript免费:)
