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

我遇到了一个问题，

文本装饰

属性与

第一个字母

规范不兼容

在此示例中，代码的目的是为每个

块的第一个字母设置样式

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

每个

块的第一个字母确实变为紫色，但没有下划线。

---

如何使其以简单有效的方式加下划线？

使用

边框底部

：

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

请参见

事实上，它在铬合金中工作良好。这可能是您遇到的浏览器支持问题

演示

---

Chome Mac版本30.0.1599.101经过测试

这是Chrome版本36+中存在的一个bug。当使用

：第一个字母设置时，
文本装饰
不会呈现

与其他浏览器相比，Chrome在呈现<代码>文本装饰：下划线

的差异方面有着有趣的历史

这些示例的第一个字母设置为

font size:10em。我已经获得了截图与

您可以在Chrome for OSX和Windows 7上查看完整结果

您可以查看JSFIDLE

Firefox是一致的
相比之下，Firefox有：


Internet Explorer

IE6-7IE8+


Chrome是不同的
这些都是从运行在MacOS10.9和Windows7 64位操作系统上的Chrome中获取的

Chrome版本19-版本31

单像素下划线


Chrome版本32-版本33

下划线放大了


Chrome版本34-版本35

Windows 7 64位Mac OSX


Chrome版本36+

错误，使用
：第一个字母设置时没有下划线

您使用的浏览器可能不支持它。您认为Google Chrome不支持它吗？Chrome并不完美。您不知道。谷歌Chrome没有正确实现的CSS1/CSS2功能数量惊人。这些都不是CSS3，尽管您已经给出了问题的标签。这是CSS1的基本功能。哦，哇，它在IE9上可以工作，但在Chrome上不行……这确实起到了作用，但我想看看是否有办法让文本装饰属性工作。结果是，Chrome不支持在第一个字母上使用的
下划线
值，因此，这是我们能得到的最接近的。在Chrome中也有一些方法可以使它与
下划线
一起工作，但它涉及太多的痛苦，在我的例子中，
边框底部
起作用。我在
Chrome 37.0.2062.102（64位）
中看不到下划线。我在Firefox（v31）中看到下划线，而在Chrome 37.0.2062.94（64位）版本中看不到下划线在Linux上。@haim770在某些浏览器上工作，而在其他浏览器上不工作。这绝对是一个浏览器问题。你说它不能在你使用的单一浏览器上工作，这证明不了什么。在你机器上的每个浏览器上都尝试一下，然后建设性地报告。@StevenPHP：这比你把他挑出来，自己不报告任何发现要好得多。FTR，我可以在我自己的电脑上证实haim770的发现。@Seth Taddiken:是的，这是一种特别令人讨厌的现象：一种回归，即过去按预期工作，但现在坏了的东西。Chrome在这方面是臭名昭著的。公平地说，该规范并没有明确定义浏览器应该如何绘制文本装饰，或者它是否应该随文本缩放，但我希望会有某种程度的一致性。再说一次，这是我们正在谈论的Chrome…34-35似乎有最好的字体大小下划线。规范中没有定义大小似乎是一个疏忽。规范中说UAs可以用文本缩放文本装饰，但由于字体渲染高度依赖于渲染算法和字体（例如，一些面被设计为具有非常小的字形），我认为您根本无法精确地定义这一点。
div.content:first-letter {
    text-decoration: underline;
    color: #bd00df;
}