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

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.

text-decoration: underline与其他浏览器相比,Chrome有一段有趣的渲染差异历史.

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

您可以查看在Chrome的全部结果为OSX 这里和Windows 7 在这里

你可以在这里查看jsfiddle .

Firefox是一致的

Firefox截图

IE 6 - 7 IE8 +

截屏IE 6 - 7 截图IE8 +

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

Chrome版本19 - 版本31

单像素下划线

截图1

Chrome版本32 - 版本33

下划线被放大了

截图2

Chrome版本34 - 版本35

Windows 7 64位Mac OSX

截图2 截图3

Chrome版本36+

错误,设置时没有下划线:first-letter.

截图4