css Firefox 首字母错误

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 中写了一个 "fix"，它的工作原理与

中的修复一样

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

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

它确实很笨拙，但它确实有效。直到 Firefox 解决这个问题。您还可以决定不使用 ::first-letter 伪元素，而使用更多 "hard coded"，例如用 <span>.

包裹标签的第一个字母

也就是说，我已经为您的问题寻找解决方案一段时间了，类似的 Whosebug post 帮助我找到了这个解决方案（这个）

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>

此致，

卢卡斯。

css Firefox 首字母错误

css first letter glitch in Firefox

css

firefox

pseudo-element

那些固定器工作不可靠，在大约 20 次刷新后它们似乎失去了功能！