Firefox中的css首字母故障

Question

我在 Firefox 中遇到了一个 CSS 故障，该故障在 IE 和 Chrome 中运行良好。 下面的示例显示了多个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>

这些修复不可靠，大约 20 次刷新后，它们似乎失去了功能！

编辑：

我刚刚在 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)
            )
        }
    }
}

Answer 1

所以我为您的问题找到了一个小解决方案。 由于该问题已在页面重绘上得到解决，您只需添加一个小关键帧即可强制重绘。

这真的很hacky，但它确实有效。直到 Firefox 解决这个问题。 您还可以决定不使用 ::first-letter 伪元素，并使用更“硬编码”的东西，例如用 <span> 包裹标签的第一个字母。

话虽如此，我已经为您的问题寻找解决方案一段时间了，类似的 StackOverflow 帖子帮助我找到了这个解决方案（这个https://stackoverflow.com/a/7553176/1331432）

a{
  font-size: 14pt;
  display: inline-block;
  animation: fix 0.00000001s;
}
.first-capitalized{
  font-size: 9pt;
  -moz-padding-end: 0;
  font-stretch: condensed;
}
.first-capitalized::first-letter{
  font-size: 14pt;
  color: red
}

@-moz-keyframes fix {
   from { padding-right: 1px; } 
   to { padding-right: 0; } 
}

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

问候，

卢卡斯。