我有一个问题 text-decoration
属性不适用于 first-letter
规范。
在此示例中,代码的目的是设置每个 <div class="content">
的第一个字母的样式。 block 。
div.content:first-letter {
text-decoration: underline;
color: #bd00df;
}
每个<div class="content">
的第一个字母 block 确实变成了紫色,但没有下划线。
如何以简单而高效的方式让它加下划线?
最佳答案
这是 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
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
设置时没有下划线。
关于html - :first-letter text-decoration browser support,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25589849/