Ошибка :first-letter
 |
Данная ошибка проявляется в случае использования псевдоэлемента :first-letter для блочного элемента. Так же необходимо что бы совпадали теги предыдущего и последующего блоков. В этом случае для блока, следующего за блоком, для которого задано правило :fisrt-letter, неверно интерпретируется css-свойство margin-left (в том числе заданное по умолчанию). Содержимое блока позиционируется так, как если бы css-свойство margin-left было установлено в 0. Остальная часть блока (границы, фон и т.д.) отображаются корректно (смотри рисунок). Изображению соответствует следующий html-код:
div.cont {background-color:#F0F0F0; border:1px solid #666666; width:200px}
div.test:first-letter {font-weight:bold; margin-left:40px; }
p.test {margin:10px 40px; border:1px solid #666666; background-color: #F0F0FF}
...
<div class='cont'>
<p class='test'>ssssssssss</p>
<div class='test'>000:</div>
<p class='test'>ssssssssss</p>
</div>
|
Рекомендации
Данную ошибку можно обойти, используя следующие методы:
- использовать разные теги перед и после элемента, для которого определен псевдоэлемент :first-letter
- использовать не блочный элемент, для которого определен псевдоэлемент :first-letter
- в некорректно отображаемом блоке использовать padding-left в место margin-left
Последний вариант наиболее прост, однако не применим если задана граница (свойств border) или фон (свойство background). Так как фон и граница отображаются корректно, корректировка при помощи padding-left приведет к их искажению.
