Я нашел ошибку в IE9, но googling для нее еще не помог найти какое-либо решение.
Следующее работает отлично в FF 3 + 4, Chrome, Opera и даже IE8, но не в IE9.
HTML:
<div class="outer">
<p class="inner">Lorem ipsum dolor</p>
</div>
CSS:
div p {
font-size: 1.2em;
}
div p:after {
content: " sit amet";
}
div p:after {
font-size: 1.3em;
}
div.outer p:after,
div p.inner:after {
font-size: 3em;
}
"sit amet" огромный в IE9, поскольку он, кажется, умножает размер шрифта снова и снова. Невозможно переписать его "важными" или другими средствами повышения специфичности (например, "div.outer" уже должен это делать). Кажется, что он получает , умноженный на одно и то же объявление, т.е. div.outer p:after, div p.inner:after
не будет умножаться на 3, а на 9!
(Обратите внимание, что здесь не нужны "внутренние" и "внешние" классы. То же самое происходит, объявляя div p {}
снова и снова, но это имеет смысл только с классами как пример реального мира.)
Вот тестовая страница: http://dl.dropbox.com/u/4667354/temp/ie9-bug.html
Есть ли какое-либо решение?
Edit:
Чтобы прояснить два недоразумения:
- Ошибка не обычного поведения, при котором дочерние элементы умножают размер шрифта своего родителя при использовании
em
. Ошибка заключается в том, что размер шрифта в сгенерированном содержимом не может быть перезаписан и при попытке будет размножаться. То есть установка размера шрифта вdiv p:after
выполняется один раз, но настройка его снова умножается, а не перезаписывает ее. - Чтобы лучше понять, в чем проблема (если у вас нет IE9 под рукой), вот два скриншота тестовой страницы: в IE8 и любой другой современный браузер и в IE9.