Плавающий :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 сравнительно легко поддаються лечению.
Решение
- Для всех браузеров прописали line-height равный визуальной высоте буквы (подбираем вручную). Таким образом все браузеры стали отображать границы элемента так же, как и IE6-7 и Firefox 3.
- Несмотря на то, что элемент плавающий, в IE6-7 не получилось управлять вертикальными margin. Поэтому, если необходимы вертикальные margin, то прописываем их для всех браузеров, а для IE6-7 выравниваем псевдоэлемент по вертикали с помощью line-height. В этом случае line-height равен сумме font-size, margin-top и margin-bottom.
- При необходимости, добавили внутренние отступы, чтобы буква выглядела красивее.
- С помощью 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.