Есть ли способ обхода CSS для ошибки Firefox: inline-block + first-letter с измененным размером

Ответ 1

Я обнаружил, что триггерное переключение на всю страницу (или любой блок с проблемой) устраняет проблему, поэтому я нашел способ запускать ее на каждом таком блоке с одноразовой анимацией CSS: http://jsfiddle.net/kizu/btdVd/23/

Тем не менее, хотя это исправление не имеет недостатков в рендеринге, оно имеет некоторые другие:

• он будет работать только для Fx5 + (который поддерживает анимацию);
• он по-прежнему мигает исходной ошибкой в ​​течение нескольких мс, поэтому, возможно, несколько мерцает.

Итак, это не идеальное решение, но несколько помогло бы, когда Fx4- устареет. Конечно, вы можете запускать такое исправление с помощью JS, но это не так приятно.

Ответ 2

Я не думаю, что там хорошее решение.

Я придумал для вас сломанное решение:

.test:first-letter {
    font-size: 2em;
    letter-spacing: -0.225em;
}

Добавьте стиль letter-spacing в селектор :first-letter в Fiddle, и вы увидите, что блоки возвращаются к примерно правильному размеру.

Объяснение:

В основном ошибка возникает из-за того, что весь блок принимает свой размер из шрифта, указанного в first-letter.

То, что я делаю здесь с letter-spacing, пытается настроить размер этого шрифта, не затрагивая его внешний вид. Таким образом, изменение расстояния между буквами в обычном тексте приведет к тому, что буквы будут перекрываться друг с другом на ширину символа .225 с обеих сторон.

Вначале я надеялся, что значение -0.25 будет достаточным, т.е. четверть символа с каждой стороны уменьшит ширину каждого символа наполовину, что было бы то, что мы хотим, потому что первая буква font-size:2em, поэтому он вдвое больше.

Однако вычисление не так чисто, как это, потому что первый и последний символы в строке будут перекрываться только с одной стороны, а потому, что первая буква действительно хочет быть двойной шириной, даже если остальные персонажи этого не делают.

Все это означает, что точное значение letter-spacing, необходимое для борьбы с ошибкой, будет зависеть от того, как долго текст, а также размер шрифта исходного текста и первая буква. Вот почему мне пришлось немного поэкспериментировать со значением интервала между буквами, чтобы заставить его работать, а также объясняет, почему я не мог полностью поместиться во всех текстовых строках в вашей скрипке. Мне понадобилось бы немного другое значение для каждого блока.

Значение -0.225, по-видимому, касается ближайшего, что я могу получить, чтобы оно было правильным для всех ваших примеров, но на практике вам нужно настроить его в соответствии с вашим сайтом.

Не забывайте также, что это ошибка Firefox, и поэтому вам нужно будет записать ее в виде какого-то конкретного браузера. И будьте осторожны, чтобы следить за сообщением об ошибке Firefox, с которым вы связаны; когда он будет исправлен, вам нужно будет разработать способ взломать место для пользователей старых версий, но удалите его для пользователей с исправлением.

[EDIT]

Единственное другое рабочее решение, которое я придумал, - это просто не использовать функции, которые вызывают ошибку. т.е. отбросить селектор :first-letter и использовать отдельную <span> для первой буквы вашего текста, если вы хотите по-разному стилизовать ее.

Это наглядный ответ на самом деле и, конечно, решит проблему (а также означало бы, что ваше стилизованное первое письмо работает в старых браузерах), но оно не будет идеальным с семантической точки зрения, и, что более важно, на самом деле ответить на вопрос, поэтому я не предлагал его в качестве решения в своем первоначальном ответе.

Я пытаюсь найти альтернативную работу для этой ошибки, но варианты ограничены, и ничто из того, что я пробовал, не дало хороших результатов, как мое первоначальное предложение.

Я попробовал взломать :first-letter невидимый и с помощью :before отобразить большую ведущую заглавную букву. Однако это не сработало для меня. Я не задерживался на нем слишком долго, поэтому вы можете заставить его работать, но есть проблема с ним в том, что вам нужно будет определить ведущую букву в CSS, что не будет идеальным.

Другим возможным решением является использование свойства CSS font-stretch: condensed; на :first-letter. Это уменьшит ширину первой буквы до 1em и, таким образом, устранит проблему ширины остальной части текста. Однако нижние стороны этого заключаются в том, что во-первых, это приведет к тому, что ведущее письмо будет выглядеть сжатым, что, вероятно, не так, как вы хотите, и, во-вторых, этот стиль работает только для шрифтов, которые поддерживают свойство condensed. Оказывается, что это не очень хорошо поддерживается стандартными шрифтами, поэтому для вас это невозможно.

В конце концов, исходное решение letter-spacing по-прежнему остается единственным способом, по которому я нашел работу над ошибкой.

Ответ 3

Эта ошибка все еще существует, но некоторые исправления больше не работают. Даже после запуска перекомпоновки с анимацией, встроенный блок вернулся к тому же самому размеру для меня. Я не мог использовать трюк letter-spacing, потому что я уже использую его в первой букве, вот что вызывает проблему для меня. Я решил проблему, добавив это в CSS для выбранного селектора:

-moz-padding-end: *number of pixels to compensate*;

В настоящий момент moz-padding-end кажется специфичным для Firefox, и он может добавлять или удалять ширину до конца встроенного блока. Поскольку это специфическая ошибка Firefox, это помогло мне.