Ошибка первой буквы css в Firefox

Я столкнулся с ошибкой CSS в Firefox, которая отлично работает в IE и Chrome. В следующем примере показано несколько тегов a, которые должны иметь минимально возможный размер, а теги a с .first-capitalized должны иметь первую букву с заглавной буквы. Но изменение с помощью псевдоселектора ::first-letter разрушает это поведение. Есть ли взлом css, чтобы он вел себя так же, как в Chrome и IE?

(Вы можете отобразить правильное представление в Firefox, если отключите и активируете правило font-size в наборе выбора .first-capitalized.)

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

css firefox pseudo-element
person Feirell    schedule 02.01.2017    source источник
comment
Кажется, что элементы с псевдоэлементом с первой буквой занимают столько же места, как если бы все слово имело больший размер шрифта. Затем, при переключении в инструментах разработчика, firefox исправляет это (как упоминает OP) Похоже на ошибку firefox для меня   -  person Danield    schedule 02.01.2017
comment
@Danield точно, что я думал :( У вас есть идеи, как исправить эту проблему?   -  person Feirell    schedule 02.01.2017

Ответы (1)


arrow_upward
4
arrow_downward

Итак, я нашел небольшое решение вашей проблемы. Поскольку проблема была исправлена ​​при перерисовке страницы, вы можете просто добавить небольшой ключевой кадр, чтобы принудительно перерисовать.

Это действительно взломано, но работает. Пока 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>

С уважением,

Лукас.

person LukyVj    schedule 02.01.2017
comment
: D, это прекрасно, у меня была похожая идея, и я создавал решение с помощью js. Но твой намного лучше! Большое спасибо за ваши усилия. - person Feirell; 02.01.2017
comment
Рад, если это поможет :) Но все кредиты достаются stackoverflow.com/users/885556/kizu - person LukyVj; 02.01.2017
comment
Кстати. Я только что добавил решение js, которое очень похоже на ваше (или kizus). - person Feirell; 02.01.2017
comment
Спустя 4 года это все еще проблема. - person evolutionxbox; 02.02.2021