Firefox中CSS首字母出现问题

Question

Firefox中CSS首字母出现问题

3

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

- Feirell

似乎带有首字母伪元素的元素占用的空间与整个单词具有较大字体大小时一样多。然后，在Firefox开发者工具中切换时，Firefox会修复此问题（正如OP所提到的）。在我看来这似乎是Firefox的一个bug。 - Danield

@Danield 确实是我想的那样 :( 你有什么想法来解决这个问题吗？ - Feirell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LukyVj · Accepted Answer

我已经找到了一个小的解决方案来解决你的问题。既然问题在页面重绘时得到了解决，你可以添加一个小的关键帧来强制重绘。

这真的很hacky，但它有效。直到Firefox修复这个问题。你也可以决定不使用::first-letter伪元素，而使用更加“硬编码”的东西，比如用<span>包裹标签的第一个字母。

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

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>

敬礼，

卢卡斯。