IE9 ошибка с увеличенным размером шрифта CSS-содержимого - PullRequest
Новая
       1

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

14 голосов
/ 12 июня 2011

Я нашел ошибку в IE9, но поиск в Google еще не помог найти решение.

Следующее работает отлично в 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;
}

"Сит-амет" в IE9 огромный , как кажетсяумножать размер шрифта снова и снова.Невозможно перезаписать его с помощью «! Important» или других средств повышения специфичности (как, например, «div.outer» уже должен это делать).Даже кажется, что он умножается на в том же объявлении , то есть div.outer p:after, div p.inner:after будет умножаться не на 3, а на 9!

(Обратите внимание, что "внутренний" и "внешний"«классы здесь не нужны. То же самое происходит, объявляя div p {} снова и снова. Но это имеет смысл только с классами в качестве реального примера.)

Вот тестовая страница: http://dl.dropbox.com/u/4667354/temp/ie9-bug.html

Есть ли какое-нибудь решение?

Редактировать:

Чтобы уточнить два недопонимания:

  1. Ошибка не обычное поведение, когда дочерние элементы умножают размер шрифта своего родителя при использовании em.Ошибка в том, что размеры шрифта в сгенерированном контенте не могут быть перезаписаны и будут все равно увеличиваться при попытке.Т.е. установка размера шрифта в div p:after когда-то работает, но установка его снова умножает вместо того, чтобы перезаписывать .
  2. Чтобы лучше понять, в чем проблема (если у вас нетIE9 под рукой), вот два скриншота тестовой страницы: в IE8 и любом другом современном браузере и в IE9 .

Ответы [ 5 ]

16 голосов
/ 12 июня 2011

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

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

3 голосов
/ 15 июня 2012

Это может как-то связано с разницей между проанализированными деревьями DOM от IE8 до IE9.

Internet Explorer 8:

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

Internet Explorer 9:

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

Bonus Reading

2 голосов
/ 16 декабря 2014

Существует обходной путь, который позволяет относительным размерам шрифтов (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 исправит ошибку и позволит стилю псевдоэлемента переопределять, а не составлять, взлом будет переопределен, как и любой другой браузер.

0 голосов
/ 13 июня 2011

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

HTML {
    font-size: 100%;
}

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

0 голосов
/ 13 июня 2011

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

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

...