Firefox中的第一个字母故障

Question

我遇到了Firefox中的CSS故障，在IE和Chrome中可以正常工作。 以下示例显示了多个a标签，这些标签应尽可能最小，a标签的.first-capitalized应该首字母大写。但与伪选择器::first-letter改变破坏了这种行为。有没有一个CSS的黑客，所以它的行为就像在Chrome和IE中一样？

（可以显示在Firefox的正确表示，如果停用和反应在.first-capitalized选择集font-size规则。）

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>

那些fixen不工作可靠，当你刷新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

所以，我已经找到了你的问题一个小的修复工作就像修复。 由于问题得到修复页面重绘，你可以添加一个小关键帧来强制重绘。

这真的很冒险，但它的工作原理。直到Firefox解决这个问题。 您也可以决定不使用::first-letter伪元素，并使用更多的“硬编码”，比如用<span>包装标签的第一个字母。

话虽这么说，我已经搜查了一个解决问题的方法了一段时间，和类似的*后帮我去这个解决方案（这一个https://*.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>

Regards，

Lucas。