Webkit 浏览器将蓝色文本显示为略带紫色答案

【问题标题】：Webkit browsers showing blue text as slightly purpleWebkit 浏览器将蓝色文本显示为略带紫色
【发布时间】：2015-11-08 02:57:45
【问题描述】：

我在 Google 中找不到有关此问题的任何信息，因为每个结果都与默认的紫色 a:visited 颜色有关。这不是这里的问题。问题在于 Chrome 的默认抗锯齿功能，在某些系统上，蓝色文本显示为蓝紫色。如果我将抗锯齿更改为-webkit-font-smoothing: antialiased，它会保持正确的颜色，但是 Chrome 和 Firefox 之间的字体完全不同。我使用的蓝色是客户的颜色，所以它不能像这样变成紫色。我希望有人能解决这个问题。

以下是我做过的测试的截图：

编辑：澄清一下，这与默认的a:visited 链接颜色无关。我的蓝色被继承了，但 Chrome 的抗锯齿导致文本显示为紫色。这是一个例子：http://jsfiddle.net/yvjjxfqt/

【问题讨论】：

贴出所有应用于文本的css属性。
@LaurentiuL。检查编辑。颜色是唯一的 CSS 样式。就像我之前提到的，这不是颜色继承问题。据我所知，这是一个抗锯齿问题。我贴的jsfiddle也有同样的紫字问题。
愚蠢的审查审核吃了我的评论...无论如何，在 Windows 上，这看起来像是与 ClearType 的交互，因为示例中的水平线在两个浏览器上都有正确的颜色，而垂直线是在 Chrome 上具有强烈的亚像素抗锯齿效果，但在 Firefox 上只有轻微的效果。（此外，如果您关闭 ClearType，那么 Firefox 也会禁用抗锯齿，而 Chrome 则不会。）
@Neil 这也发生在 OSX 中，但仅限于非视网膜屏幕。也许 Chrome 使用自己的类型渲染器？

标签： css google-chrome

【解决方案1】：

解决了（至少在我的系统中）在元素中设置变换

a {
    color: #1967b1;
    display: block;
}

a:nth-child(2) {
    transform: rotateX(0deg);
}

<a href="#">This is a link</a>
<a href="#">This is a link</a>

我猜gpu中的渲染没有这个问题

这就是它在我的系统中的样子

解决它的另一种方法似乎是使用不透明度

a {
    color: #1967b1;
    opacity: 0.99;
}

&lt;a href="#"&gt;This is a link&lt;/a&gt;

【讨论】：

您为什么选择旋转而不是 transform3d（强制硬件加速的更常见技巧）？只是好奇。
请注意，这仅在元素具有块类型显示设置时才有效。当元素设置为display:inline;时，此解决方案不起作用。
@vals 谢谢！做到了！
很高兴它有帮助！
@vals - 不错的不透明度解决方案。由于这似乎是一个 webkit 问题，您可以只使用前缀 -webkit-opacity 属性。