css erster Buchstabe Glitch in Firefox

Question

Ich stieß auf einen CSS-Fehler in Firefox, der in IE und Chrome funktioniert. Das folgende Beispiel zeigt mehrere a Tags, die alle die kleinste mögliche Größe haben sollten und die a Tags mit .first-capitalized sollten ihren ersten Buchstaben groß geschrieben haben. Aber die Änderung mit dem Pseudo Selektor ::first-letter zerstört dieses Verhalten. Gibt es einen CSS-Hack, so verhält es sich in Chrome und IE?

(Sie können die korrekte Darstellung in Firefox angezeigt werden, wenn Sie die font-size Regel in der .first-capitalized Wählschalter deaktivieren und reaktiv.)

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>

Diese fixen nicht zuverlässig arbeiten Nach 20 Aktualisierungen scheinen sie ihre Funktionalität zu verlieren!

EDIT:

Ich schrieb ein "fix" in js, die ebenso wie die Korrektur funktioniert von @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

Also habe ich ein kleines Update für das Problem gefunden. Da das Problem beim Repaint der Seite behoben wurde, können Sie einfach ein kleines Keyframe hinzufügen, um das Repaint zu erzwingen.

Es ist wirklich hacky, aber es funktioniert. Bis Firefox das Problem behebt. Sie können sich auch dafür entscheiden, das ::first-letter Pseudo-Element nicht zu verwenden und etwas "fester codiertes" zu verwenden, wie den ersten Buchstaben Ihres Tags mit einem <span> zu umhüllen.

aber sagen, dass ich habe eine Lösung für Ihr Problem für eine Weile gesucht, und ein ähnlicher Beitrag Stackoverflow hat mir geholfen, zu dieser Lösung zu erhalten (dieses 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>

Grüße,

Lucas.