Xiper

Плавающий :first-letter

Автор: Татьяна Шкабко Дата публикации:

Эта статья является продолжением статьи Используем псевдоэлемент :first-letter.

В зависимости от установленных стилей :first-letter может быть строчным или плавающим. В данной статье рассматривается ситуация, когда псевдоэлемент :first-letter плавающий. Кроссбраузерное решение для строчного псевдоелемента читай в статье Строчный :first-letter.

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

Задача

Добиться кроссбраузерного отображения первой буквы когда псевдоэлемент :first-letter плавающий.

Проблемы с кроссбраузерностью

У IE6-7, Firefox 3.0, Firefox 3.5 область псевдоэлемента :first-letter отличается от остальных браузеров

Кроме того фоновая картинка у IE6-7 позиционируется не так, как в остальных браузерах.

Демо-пример (элементы раскрашены для наглядности).

Еще один нюанс возникает с применением свойства clear. Для псевдоэлемента :first-letter разные браузеры отрабатывают его по-разному.

Демо-пример.

Кроссбраузерного решения для clear мы пока не нашли, а вот background и border сравнительно легко поддаються лечению.

Решение

  1. Для всех браузеров прописали line-height равный визуальной высоте буквы (подбираем вручную). Таким образом все браузеры стали отображать границы элемента так же, как и IE6-7 и Firefox 3.
  2. Несмотря на то, что элемент плавающий, в IE6-7 не получилось управлять вертикальными margin. Поэтому, если необходимы вертикальные margin, то прописываем их для всех браузеров, а для IE6-7 выравниваем псевдоэлемент по вертикали с помощью line-height. В этом случае line-height равен сумме font-size, margin-top и margin-bottom.
  3. При необходимости, добавили внутренние отступы, чтобы буква выглядела красивее.
  4. С помощью background-position спозиционировали рисунок для IE6-7.

Демо-пример.

Проверено в:

  • IE 6-8
  • Firefox 3.0-3.5
  • Opera 9.5-10.6
  • Safari 4
  • Chrome 8

Недостатки

  • Если, по какой-то случайности, абзац начинается с маленькой буквы, он будет отличаться от остальных браузеров в IE6-7 и Firefox 3.

    Демо-пример.

  • Визуальную высоту буквы нужно подбирать вручную, что требует времени.
  • Если для буквы margin-top не равен margin-bottom, то у IE6-7 будет отличие на половину разницы между ними.
  • Чтобы иметь возможность откорректировать позиционирование рисунка в IE6-7, нужно позиционировать фоновую картинку относительно левого верхнего края, что может вызвать неудобство.
  • Для IE6-7 нужно вручную подбирать значения для background-position, что отнимает время. Кроме того это нужно делать тогда, когда уже окончательно известно line-height, потому что при его изменении изменяются и значения для background-position.
  • При изменении размера заглавной буквы изменяются и значения для background-position в IE6-7.

По теме: