относительный размер шрифта <sub>или <sup>и их потомки в IE

Question

Попытка « Eric Meyer Reset » Я наткнулся на проблему, касающуюся объявления font-size:100% для сброса размера шрифта всех подходящих элементов.font-size:100% означает, что элементы должны наследовать свойство font-size своего родителя, но это не относится к элементам <sub> и <sup> и их потомкам в IE (протестировано в 6,7,8 и 9-й версии).

Например (или этот живой пример на игровой площадке ):

// CSS:
sup,span {font-size:100%;}
// HTML:
if you try this in IE, <sup>this text will be smaller <span>and this even more</span></sup>

Кажется, что это просто еще один трюк реализации, который IE играет на веб-дизайнерах, так как это не единственный глюк этих элементов.Я предполагаю, что IE применяет некоторые собственные аппаратные стили к элементам <sub> и <sup>, которые уменьшают их содержимое в дополнение к под- / надстрочным, но я не могу найти способ сбросить это поведение, есличто-либо вообще существует.

// Пожалуйста, ответьте прямо на эту проблему, предложения типа «использовать таблицу стилей, специфичные для UA» могут удовлетворить ваше чувство полезности, но не удовлетворяют теме :-)..EDIT: Хорошо, эта просьба, наконец, обернулась против меня, но я хотел бы высказать хотя бы один ответ на эту тему здесь.

РЕДАКТИРОВАТЬ: Похоже, IE (все версии до IE9) умножает размер шрифта <sub> и <sup> и их потомков на некоторый переменный коэффициент (sth между 0,6 - 0,8 в зависимости от размера шрифта).

Аргументация следующая: : если для тега <sup> и всех его потомков установлен фиксированный размер (например, font-size:15px), все они имеют размер шрифта около 10px (10 0.7 × 15 пикселей)Но когда вместо этого устанавливается относительный размер (например, font-size:100%), эффект коэффициента распространяется от элемента <sup> до его потомков - так что потомок 1-го уровня имеет размер шрифта около 70% (≅ 0,7 × 100% своего <sup> родителя), потомок 2-го уровня имеет размер шрифта около 50% (≅ 0,7 × 0,7 × 100% своего <sup> предок) и так далее.Это распространение прерывается при использовании font-size:inherit, поскольку это означает, что элемент должен иметь точно такой же размер, как и его родительский элемент - это работает для потомков элемента <sup>, но самому элементу <sup> по-прежнему присваивается шрифт меньшего размераразмер по IE, чем у его родительского элемента.

Теория коэффициентов :-) участие в IE можно увидеть на в этом примере .Также сравните это с любым из «стандартных» браузеров.

Answer 1

Похоже, что единственным "решением" оставить объявление сброса font-size:100% в таблице стилей и по-прежнему иметь приемлемые под- / верхние индексы, является либо:

• Используйте другой элемент для оформления под- / верхних индексов, например <span>. Определенно не очень хорошая идея в свете семантики → исключено .
• Используйте таблицу стилей, специфичную для UserAgent, в лучшем случае условные комментарии (это то, о чем я беспокоился, потому что до сих пор мне не приходилось использовать их для IE ≥ 7), и явно меняем стиль каждого потомка для компенсации "коэффициента" Эффект "→ не стоит: -) .
• Оставьте все как есть, чтобы все могли видеть, что IE имеет свои собственные правила (в идеале / наивно это может заставить их исправить это в следующей версии) и используйте font-size:inherit, чтобы иметь хотя бы потомков <sub> или <sup> будет одинакового размера по умолчанию в IE ≥ 8 → принято .

---

решение # 2 , это поможет (конечно, его можно настроить, но только концепция):

<!--[if IE]>
<style>
  sup *,sub * {font-size:120%; font-size:inherit;}
</style>
<![endif]-->

при условии, что вы не стремитесь к максимальной производительности (см. Вопрос производительности селектора * ).

Answer 2

Я не тестировал, но пока работает:

sup,
sub {
    font-size: inherit;   /* all browser */
    font-size: 120%\0/;   /* wie only */
}