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 次刷新后它们似乎失去了功能!

/p>

编辑:

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

问候，

卢卡斯。