javascript - CSS::first-letter drop cap 忽略 $ 符号。有 Polyfill 吗？

Question

我想在价格前的 $ 符号上添加自定义样式。简单的方法:

<style>.dropcap { doStuff; }</style>
<p><span class="dropcap">$</span>19.95</p>

问题是简单的方法不是语义的或可访问的。我想要遵循的简单、基于标准的方法是像这样使用 ::first-letter {}:

<style>p::first-letter { doStuff; }</style>
<p>$19.95</p>

这在大多数浏览器中工作正常，但 Firefox 将 $ 符号解释为“标点符号”并忽略 CSS 规则。其他现代浏览器似乎可以很好地处理这个问题。

是否有 jQuery/JavaScript polyfill 或 CSS hack 可以让我以基于标准的方式执行此操作并使其在 Firefox 中仍然有效？

更新:我发现了一个似乎可以解决问题的 polyfill:jquery-fancyletter .希望也能找到 Modernizr 功能检测但找不到。尝试自己编写，但该死的东西总是返回 false(即使在支持该功能的 Chrome 中也是如此)。谁能告诉我我的特征检测出了什么问题？

Modernizr.addTest('dollarFirstLetter', function() {
return Modernizr.testStyles('#modernizr p:first-letter {margin-right:20px;display:block}', function(elem) {
    window.ptag = document.createElement("p");
    ptag.innerHTML = "$39.95";
    elem.appendChild(ptag);
    return window.getComputedStyle(ptag, ":first-letter").marginRight === "20px";
});
});

Answer 1

作为解决方法，您可以使用

<p data-currency="$">19.95</p>

p::before {
    content: attr(data-currency);
    doStuff;
}