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

Question

Пробуя " Эрик Мейер Сброс", я наткнулся на проблему, касающуюся 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> и их потомки с некоторым переменным коэффициентом (от 0,6 до 0,8 в зависимости от размера шрифта).

Аргументация следующая: когда фиксированный размер (например, font-size:15px) установлен на <sup> тег и все его потомки, все они имеют размер шрифта около 10px (≅ 0.7 × 15px). Но когда вместо этого устанавливается относительный размер (например, 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 */
}