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中运行？

更新：我发现了一个似乎可以解决问题的填充：jquery-fancyletter。希望也找到一个Modernizr功能检测，但找不到。尝试写我自己的，该死的东西总是返回假（即使在支持该功能的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这样做的方式是我强烈建议使用的方式。

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

2 个答案: