是否有一种检测Firefox的“良好实践”方式?

时间:2013-06-19 19:34:53

标签: javascript css firefox colors browser-detection

如果我要阅读这个问题的标题,从未见过它,我的第一反应就是“不要!使用特征检测!”,这很有道理,但是,它不是一个特征我试图检测,但 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呈现颜色的方式之间的区别(显示第二个)。注意每个“按钮”图像之间的颜色(实际上只是一个'mousover'下拉框)。另请注意,图像之间显示的小颜色是图像本身,只是标准的CSS呈现的十六进制颜色:

IE 10: enter image description here

Firefox 21.0: enter image description here

我可以使用任何可以让Firefox以与IE和Chrome相同的方式显示颜色的解决方案(在32位和64位上都进行测试,而且只有Firefox在这两种情况下进行测试),但是我很好知道我不会改变整个世界的“about:config”文件,所以如果我能够可靠地检测到Firefox,也许我可以将其颜色调整为更暗的颜色。不幸的是,我(可能非常明智地)从不使用浏览器检测,因为我知道它是多么不稳定和不可靠。

是否有可靠的(更不用说,面向未来)方式来检测网页设计师的Firefox?我只是使用JavaScript / jQuery进行客户端脚本编写。

-------------------- UPDATE ---------------------

好的,这是渲染边框颜色的CSS。 red-is按钮有两个类:DDL和visType,而grey-ish按钮有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)。

1 个答案:

答案 0 :(得分:1)

对于这种情况,问题显然是Firefox呈现“插入”的不同之处。边框风格。为什么我把它作为插图开始是一种模糊。我可能正在测试如此薄的(2px;)边界上的各种外观(鉴于宽度非常窄,差异很小,如果有的话,很明显)。

一旦我将这种风格改为solid;,颜色差异就会大得多:

Chrome 27.0.1453.110 m:

enter image description here

Firefox 21.0:

enter image description here

上面显示的相同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来解决这个问题?),但缩小它是非常困难的。