是否有检测 Firefox 的“良好实践”方法？答案

【问题标题】：Is there a "good practice" way of detecting Firefox?是否有检测 Firefox 的“良好实践”方法？
【发布时间】：2013-06-16 11:50:59
【问题描述】：

如果我以前从未见过这个问题的标题，我的第一反应是，“不要！改用特征检测！”，这完全有道理，但是，它不是一个特征我正在尝试检测，但 Firefox 如何呈现颜色。

由于某种原因，到目前为止，我测试过的所有其他浏览器都会呈现某种十六进制颜色，该颜色在图像之间显示得很漂亮，但在 Firefox 中却显示为较浅。

我已经阅读了可能的原因（即关于颜色配置文件的一些内容，我现在正在探讨这个主题）和“about:config”文件：

http://support.mozilla.org/en-US/questions/774152

http://jorgebernal.info/2008/03/08/whats-wrong-with-colors-in-firefox/

http://www.maketecheasier.com/28-coolest-firefox-aboutconfig-tricks/2008/08/21

知道为什么很好，但似乎没有关于网页设计师应该如何处理这个问题的话题（另外，我可能在这里混淆了这个问题，因为他们似乎说了很多关于图像，我遇到问题的颜色渲染是不是图像，而只是一个简单的十六进制颜色代码值）。

这里有几个屏幕截图显示了正确显示的颜色（第一个显示）和 Firefox 如何呈现颜色（第二个显示）之间的差异。注意每个“按钮”图像之间的颜色（实际上只是一个“鼠标悬停”下拉框）。另请注意，图像之间显示的小颜色不是图像本身，只是标准 CSS 呈现的十六进制颜色：

IE 10：

Firefox 21.0：

我对任何可以让 Firefox 以与 IE 和 Chrome 相同的方式显示颜色的解决方案都很好（在 32 位和 64 位上都进行了测试，但仍然只有 Firefox [在两者上]），但我知道我不会为整个世界更改“about:config”文件，所以如果我能可靠地检测到 Firefox，也许我可以将其颜色调整为更深的阴影。不幸的是，我（可能非常明智地）从不使用浏览器检测，因为我知道它是多么不稳定和不可靠。

是否有可靠的（更不用说，面向未来的）方法来为网页设计师检测 Firefox？我只是将 JavaScript/jQuery 用于客户端脚本。

--------更新----------强>

好的，这里是呈现边框颜色的 CSS。红色按钮有两个类：DDL 和 visType，而灰色按钮有 DDL 和 groupType 类。

.DDL.visType
{
    background-color: #bb9191;
    border-right: 2px inset #ba8c8c;
    color: #1a5c17;
}

.DDL.groupType
{
    background-color: #e7e7e7;
    border-right: 2px inset #989898;
    color: #0b3773;
}

因此，就 FireFox 而言，您可以看到这个 CSS 没有任何问题。事实上，当查看在 Firebug 和 Chrome 的开发工具中呈现的真实颜色时，说红色按钮的右边框呈现的实际颜色是相同的（在 rgb 中，它转换为 186、140 , 140)。

【问题讨论】：

您通常不应该将 JavaScript 用于 css/设计特定任务。
我不确定你所说的 css/design 特定任务是什么意思？如果需要，我一直使用 jQuery 的 .css() 来动态更改颜色。
你也可以反过来做：把图片扔掉，用linear-gradients作为按钮的背景。
您可能只是使用了错误的 CSS，如果您在测试环境中提供 CSS 代码（例如，在 jsFiddle 中重新创建），就可以修复。然后我们将能够破译它是否真的是 Firefox，或者你的 CSS 是问题所在。
@VoidKing 我的意思是，我可以告诉您，查看您的菜单可能不是颜色显示不正确，而是其他原因。如果您可以使用仅导致问题的菜单的静态 HTML 和 CSS 重新创建问题，我们或许可以为您提供帮助。

标签： javascript css firefox colors browser-detection

【解决方案1】：

对于这种情况，问题显然是 Firefox 呈现“插入”边框样式的方式有何不同。为什么我把它作为插图开始有点模糊。我可能在如此细的 (2px;) 边框上测试各种外观（考虑到非常窄的宽度，差异几乎不明显）。

一旦我将此样式更改为solid;，颜色差异就不会那么剧烈了：

铬 27.0.1453.110 米：

Firefox 21.0：

上面显示的相同 CSS 代码具有新的更改（仅将两个匹配项从 inset 更改为 solid）：

.DDL.visType
{
    background-color: #bb9191;
    border-right: 2px solid #ba8c8c;
    color: #1a5c17;
}

.DDL.groupType
{
    background-color: #e7e7e7;
    border-right: 2px solid #989898;
    color: #0b3773;
}

我想，一个原本不应该发生的有点迟钝的问题的简单解决方案，我想（为什么要使用 inset 来解决这样的事情？），但缩小范围非常困难。

【讨论】：