CSS ::第一個字母首字下沉忽略$符號。 有保鮮紙嗎？

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;
}

Answer 2

在Modernizr中沒有對此進行測試，但是如果您確實需要使用它，則需要創建一個與所需選擇器匹配的元素，然后檢查一個屬性。 如果它是已知值，則可以使用；如果它是未知/不需要的值，則不受支持。

例如

#test_element {
  font-size: 0
}
#test_element::first-letter {
  font-size: 10px
}

與類似以下JavaScript的東西

var el = document.createElement('div');
el.id = 'test_element'
el.innerHTML = '$';
document.body.appendChild(el);
Modernizr.addTest('fullFirstCharacter', el.clientHeight > 0);
document.body.removeChild(el);

Modernizr有一個testStyle方法可以為您處理大部分操作，但是以上邏輯是它使用的概念

（請注意，為了測試元素的實際計算樣式，您需要將其實際附加到主體上，然后再將其刪除）。

但是，我強烈建議使用@Oriol的方法。