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>包裝標籤的第一個字母。

話雖這麼說，我已經搜查了一個解決問題的方法了一段時間，和類似的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>

Regards，

Lucas。