如果我以前从未见过这个问题的标题,我的第一 react 是,“不要!改用特征检测!”,这很有道理,但是,它不是特征我正在尝试检测 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:
火狐 21.0:
我对任何可以使 Firefox 以与 IE 和 Chrome 相同的方式显示颜色的解决方案都很好(在 32 位和 64 位上进行了测试,但仍然只有 Firefox [在两者上] 都这样做),但我我知道我不会为全世界更改“about:config”文件,所以如果我能够可靠地检测到 Firefox,也许我可以将它的颜色调整为更深的阴影。不幸的是,我(可能非常明智)从不使用浏览器检测,因为我知道它是多么不稳定和不可靠。
是否有一种可靠的(更不用说,面向 future 的)方法来为网页设计师检测 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).
最佳答案
对于这种情况,问题显然是 Firefox 呈现“插入”边框样式的方式有何不同。为什么我一开始就把它作为插图有点模糊。我可能是在如此细的 (2px;
) 边框上测试各种外观(考虑到非常窄的宽度,差异几乎不明显)。
将此样式更改为 solid;
后,颜色差异就不那么明显了:
Chrome 27.0.1453.110 米:
火狐 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
来处理这样的事情?),但缩小范围非常困难。
关于javascript - 是否有检测 Firefox 的 "good practice"方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17199814/