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

【问题标题】：Cross Browser Font/Color Issues - Chrome/Safari跨浏览器字体/颜色问题 - Chrome/Safari
【发布时间】：2019-11-27 07:06:13
【问题描述】：

我的网站 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;
}

我还发现了这个与谷歌浏览器相关的链接，即关于使用：

@charset "xxx"

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

【问题讨论】：

你可能想发布一些代码示例
已为主要内容 div 添加了所需的样式，其中字体/颜色在 Chrome/Safari 中不正确。

标签： css firefox safari cross-browser google-chrome

【解决方案1】：

我刚刚检查了我的电脑，Firefox 和 Chrome 的颜色似乎没有区别。我正在运行 Windows（对于这两个），应该注意的是，Mac 和 PC 之间的颜色总是存在差异的，因为它们使用不同的伽马值进行校准。阅读更多关于 gamma 的东西 here，但请注意，从 CSS 的角度来看，您无能为力。

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

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

【讨论】：

【解决方案2】：

如果您将它们设为一种颜色（例如红色），也会发生这种情况吗？如果不是，那只是webkit的抗锯齿比较激进。

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

【讨论】：

【解决方案3】：

您发布的示例 css 没问题。尝试将!important 添加到颜色属性。

color: #FF9904 !important;

【讨论】：

使用 !important 标签不是一个好习惯，因为它会混淆样式的优先级
@GrayCygnus 这个问题在 7 年后无关紧要。当时也可能是浏览器错误。

【解决方案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 颜色和图像应用颜色校正。

【讨论】：