我在Firefox中遇到了CSS故障,但在IE和Chrome中运行良好。
以下示例显示多个
(如果您在
这些修复程序不可靠,在刷新约20次后,它们似乎失去了功能!
编辑:
我刚刚使用JS编写了一个“修复程序”,它的工作方式与 @LukyVi 的修复程序相同。
a
标签,它们应该都是最小的大小,而带有.first-capitalized
的a
标签应该将它们的第一个字母大写。但是,使用伪选择器::first-letter
进行更改会破坏此行为。是否有CSS hack可以使其像Chrome和IE一样工作?(如果您在
.first-capitalized
选择器集中停用并重新启用font-size
规则,则可以在Firefox中显示正确的表示。)
a{
font-size: 14pt;
display: inline-block;
}
.first-capitalized{
font-size: 9pt;
}
.first-capitalized::first-letter{
font-size: 14pt;
}
<a href="">LOREM</a>
<a href="" class="first-capitalized">IPSUM</a>
<a href="">DOLOR</a>
<a href="" class="first-capitalized">SIT</a>
<a href="">AMET</a>
<a href="" class="first-capitalized">CONSETETUR</a>
<a href="">SADIPSCING</a>
<a href="" class="first-capitalized">ELITR</a>
编辑:
我刚刚使用JS编写了一个“修复程序”,它的工作方式与 @LukyVi 的修复程序相同。
var continueFlag = true;
for (var i = 0; continueFlag && i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
for (var n = 0; continueFlag && n < sheet.cssRules.length; n++) {
var rule = sheet.cssRules[n];
if (rule.selectorText == '.first-capitalized') {
var orig = rule.style['font-size'];
rule.style['font-size'] = '0px';
continueFlag = false
window.requestAnimationFrame(function (rule) {
//font size = 0px gets rendered
window.requestAnimationFrame(function (rule) {
//font size = orig gets rendered
rule.style['font-size'] = orig;
}.bind(this, rule))
}.bind(this, rule)
)
}
}
}