Ошибка IE9 с увеличенным размером шрифта css-содержимого

Я нашел ошибку в 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.

Ответы

Ответ 1

Вы можете попробовать использовать rem вместо em, IE9 поддерживает его, тогда ваши размеры будут относиться к базовому шрифту вместо умножения вместе. Вот хорошее объяснение.

Я бы предположил, что разница в том, что IE9 обрабатывает сгенерированный контент как дочерний элемент, в то время как другие браузеры не являются, следовательно, умножением.

Ответ 2

Этот может иметь какое-то отношение к различию между обработанными деревьями DOM от IE8 до IE9.

Internet Explorer 8:

  • <html>
    • <head>
    • <body>
      • <div class="outer">
        • <p class="inner">
          • Текст - Lorem ipsum dolar

Internet Explorer 9:

  • <html>
    • <head>
    • <body>
      • Текст - пустой текст Node
      • <div class="outer">
        • Текст - пустой текст Node
        • <p class="inner">
          • Текст - Lorem ipsum dolar
        • Текст - пустой текст Node
      • Текст - пустой текст Node

Чтение бонусов

Ответ 3

Существует обход, который позволяет относить размер шрифта (em или %): добавьте еще один класс с псевдоэлементом font-size, уменьшим размер.

Я собрал скрипт, показывающий обходной путь, но базовый код ниже:

<p class="one">Test (1.25em = 20px)</p>
<p class="one two">Test (2em = 32px but 2.5em = 40px in IE)</p>
<p class="one one-ie two">Test (2em = 32px)</p>

Затем стили выглядят следующим образом:

body {
    font-size: 16px;
}

.one::before {
    content:      "::before";
    font-family:  monospace;
    font-size:    1.25em;
    margin-right: 10px;
}

.one-ie::before {
    font-size: 0.8em;
}

.two::before {
    font-size: 2em;
}

Большинство браузеров будут переопределять селектор .one-ie::before с помощью .two::before, а сборка IE по существу будет отрицать предыдущий font-size. Если IE исправить ошибку и разрешить псевдоэлементные стили переопределять, а не составлять, хак становится переопределенным, как и любой другой браузер.

Ответ 4

Я вижу тестовую страницу "sit amet" столь же огромной в Firefox 4.0.1. Вы уверены, что это только IE, а не фактическое поведение?

edit: и сафари тоже. Я нахожусь на Mac. Я не думаю, что это ошибка IE.

Ответ 5

Я видел подобное в других версиях IE, используя ems. Попробуйте установить

HTML {
    font-size: 100%;
}

Должны это исправить!