html - :first-letter text-decoration browser support

Question

我有一个问题 text-decoration属性不适用于 first-letter规范。

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

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

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

Answer 1

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

与其他浏览器相比，Chrome 在 text-decoration: underline 方面有一段有趣的渲染差异历史。

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

您可以在适用于 OSX here 和 Windows 7 here 的 Chrome 上查看完整结果

可以查看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 设置时没有下划线。