：首字母文字装饰浏览器支持

Question

我遇到text-decoration属性不符合first-letter规范的问题。

在此示例中，代码的目的是设置每个<div class="content">块的第一个字母的样式。

div.content:first-letter {
    text-decoration: underline;
    color: #bd00df;
}

每个<div class="content">块的第一个字母确实变为紫色，但没有加下划线。 如何以简单而富有成效的方式强调它？

Answer 1

Chrome版本36+中存在此错误。使用text-decoration设置时，:first-letter不会呈现。

Chrome与其他浏览器相比，在text-decoration: underline呈现差异方面有着有趣的历史。

这些示例的第一个字母设置为font-size: 10em;。我已经使用crossbrowsertesting.com获取了屏幕截图。

您可以在Chrome for OSX here和Windows 7 here

上查看完整结果

您可以查看jsfiddle here.

Firefox是一致的

为了进行比较，Firefox有these consistent results, tested from Version 7：

Internet Explorer

Even IE is more consistent.

IE 6 - 7 IE8 +

Chrome不同

这些内容来自在Mac OS 10.9和Windows 7 64位上运行的Chrome

Chrome版本19 - 版本31

单像素下划线

Chrome版本32 - 版本33

下划线被放大

Chrome版本34 - 版本35

Windows 7 64位Mac OSX

Chrome版本36 +

错误，使用:first-letter设置时没有下划线。

Answer 2

改为使用border-bottom：

div.content:first-letter {
    border-bottom: 1px solid red;
    color: #bd00df;
}

请参阅Fiddle

Answer 3

事实上，它在镀铬方面工作得很好。这将是您遇到的浏览器支持问题

DEMO http://jsfiddle.net/3pg23vck/

div.content:first-letter {
    text-decoration: underline;
    color: #bd00df;
}

Chome Mac版本30.0.1599.101测试