Заглавные буквы CSS3 неправильно расположены в IE9 с заполнением em

Question

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

У меня есть несколько абзацев с заглавными буквами на первых буквах с использованием псевдо-селекторов CSS3.Это хорошо отображается в FF, Opera и Safari, но не в IE9.Проблема в том, что я использую единицы em для заполнения буквы.Если я изменю их на px, буква будет хорошо отображаться во всех браузерах;НО я не рад смешивать px и em в моем тексте.Я предполагаю, что это как-то связано с тем, как IE9 отображает единицы измерения.

Я сделал jsfiddle здесь: http://jsfiddle.net/C5zsv/

HTML:

<section class="post-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet mi ut erat dapibus varius. Cras aliquet augue eget ipsum posuere a mattis quam gravida. Proin pretium rhoncus mi, nec dapibus odio iaculis id. Aenean mattis, nulla eu hendrerit fermentum, urna tellus tristique mauris, eu dignissim quam arcu ut nisi.</p>
</section>

CSS:

p {
    margin:0 0 1.5em 0;
    text-align:justify;
    font:1em/1.5 Georgia, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", serif;
}

.post-content p:first-child:first-letter {
    float:left;
    color:#444;
    font-size:3.3em;
    padding:0.1em 0.1em 0 0;
    line-height:0.7em;
    text-shadow:2px 2px 0 #dadada;
}

Спасибо за любые идеи!:)

BRgds

Answer 1

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

Прежде всего, вот код, который я использовал для проверки этого (ответвление от вопроса):

<p>Yyy is a<br />tall letter<br />indeed.</p>
<p>&Ntilde;ino has a<br />tall letter<br />as well.</p>
<p>ggg has a<br />big bottom<br />ahw yeah.</p>

И CSS:

p {
    margin: 0 0 1.0em 0;
    font: 3em/1.5 Georgia;
    background-color: #CCE;
}
p:first-letter {
    float: left;
    font-size: 3.3em;
    padding: 0.1em 0.1em 0 0;
    line-height: 0.7em;
    background-color: #DFD;
}

Проверьте новую скрипку

Как это отрисовывается в различных браузерах:

В основном ответ на этот вопрос SO (или, по крайней мере, в нижней строке, без каламбура), кажется: смешивание em и first-letter покидает ваш сайтво власти браузера и семейства шрифтов.И мальчик, не милосердный.

Это "милосердие" также имеет несколько интересных особенностей:

• Chrome (125px) и IE (134px) поддерживают постоянную высоту дляпервая буква, но FF решает дать С некоторую дополнительную высоту.
• FF почти всегда держит букву внутри фактического поля (за исключением верхней левой части Y, но все 3 браузера делают это).
• Chrome и IE позволяют символам С и строчной буквы g выходить за пределы поля.
• Ни один из трех браузеров не выровнял нижнюю часть второй строки текста с фактической нижней частью первой буквы .
• Установка отступа в px улучшает ситуацию с капиталом Y в IE, однако для меня это постоянно мешало в FF и Chrome.
• Ожидаемые результаты сильно меняются при изменении семейства шрифтов.
• Последнее, но не менее важное: это только первая буква, которая не работает согласованно.Три обычные строки текста очень похожи (возможно, даже идентичны?) В этих трех браузерах.

Информация от w3.org

В модуле CSS3-linebox есть некоторая информацияна базовое выравнивание , которое представляется актуальным для этих вопросов.Возможно, придется немного почитать, чтобы увидеть, что это за состояние (или, может быть, кто-то здесь может его добавить?).