Question

希望有人可以帮助解决我可能做错的事情，因为我的网站css（样式）在Firefox中看起来都不错，但在Chrome和Safari中，我的字体看起来都是黑色而不是灰色。，在Firefox中。

任何人都可以帮助解释为什么Safari和Chrome中的字体/颜色不同 - 它看起来像粗体黑色。

我在内容div中使用的标题样式，即：

#content {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #990;
    border-bottom-color: #990;
    border-left-color: #990;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #FFF;
    width: 973px;
    text-align: left;
    display: block;
    background-image: url(images/bgcontent.jpg);
    background-repeat: repeat;
}


h1 {
    font-family: "Lucida Grande";
    background-color: transparent;
    height: 20px;
    width: 650px;
    color: #FF9904;
    font-size: 36px;
    text-align: left;
    float: none;
    vertical-align: top;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #999;
    letter-spacing: normal;
    margin: 0;
    padding: 0.5em 0;
}

我还发现此链接与Google Chrome有关，即使用：

@charset“xxx”

http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs

感谢。

Answer 1

我刚检查过我的电脑，Firefox和Chrome之间似乎没有颜色差异。我正在运行Windows（对于这两者），应该注意的是，Mac和PC之间的颜色始终存在差异，因为它们使用不同的伽玛值进行校准。阅读有关gamma内容here的更多信息，但请注意，从CSS角度来看，您无法做很多事情。

另一个可能的问题是，它可能只是您的计算机...您是否在多台计算机上尝试过此问题？您始终可以尝试使用Browsershots或Browserlab等工具。

最后，有可能是某些相关代码触发了一些跨浏览器的差异....这是你的所有代码还是在某处有更多的CSS？您能否提供您遇到问题的页面的实时链接？

Answer 2

如果你把它们变成颜色，例如红色，它也会发生吗？如果不是，那么它只是webkit的抗锯齿，它更具侵略性。

但如果它仍然发生，你可以检查chrome检查器和firebug，如果safari / chrome和firefox解释CSS的方式不同。他们选择哪种颜色选择器

Answer 3

你发布的样本css没问题。尝试将!important添加到颜色属性。

color: #FF9904 !important;

Answer 4

在撰写本文时（2015年6月），有bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours或untagged images。 Safari（自OS X 10.9起）对CSS颜色和图像应用颜色校正。

跨浏览器字体/颜色问题 - Chrome / Safari

4 个答案: