Question

Trying the “Eric Meyer Reset” I stumbled across an issue concerning the font-size:100% declaration to reset the font size of all suitable elements. font-size:100% means the elements should inherit font-size property of their parent, but this is not the case with the <sub> and <sup> elements and their descendants in IE (tested in 6,7,8 and 9th version).

For example (or this live example on a playground):

// 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>

It seems like just another implementation trick, that IE plays on webdesigners, since this is not the only glitch of these elements. My guess is that IE applies some own hard-wired styling on the <sub> and <sup> elements which makes their content smaller in addition to being sub-/superscripted, but I can’t find a way to reset this behaviour, if any exists at all.

// Please respond directly to this issue, suggestions like “use an UA specific stylesheet” may satisfy your feeling of being helpful, but doesn’t satisfy the topic 🙂 ..EDIT: Ok, this plea has finally turned against me, but I wanted to state at least one answer to this topic here.

EDIT: It looks like IE (all versions till IE9) multiplies the font size of the <sub> and <sup> and their descendants with some variable coefficient (sth between 0.6 – 0.8 depending on the font-size).

The reasoning is following: when a fixed size (e.g. font-size:15px) is set on the <sup> tag and all its descendants, they all have the font size around 10px (≅ 0.7 × 15px). But, when a relative size is being set instead (e.g. font-size:100%), the coefficient effect is propagated from the <sup> element down to its descendants – so 1st-level descendant has the font size around 70% (≅ 0.7 × 100% of its <sup> parent), 2nd-level descendant has the font size around 50% (≅ 0.7 × 0.7 × 100% of its <sup> ancestor) and so on. This propagation breaks when font-size:inherit is used, since it means the element should have exactly the same size as its parent – this works for the descendants of the <sup> element, but the <sup> element itself is still given a smaller font size by IE than its parent element does have.

The coefficient theory 🙂 taking part in IE can be seen on this example. Also compare this with any of the “standard compliant” browsers.

Answer 1

It seems like the only “solution” to leave the font-size:100% reset-declaration in the stylesheet and still have acceptable sub-/superscripts is so far either to:

• Use a different element for styling the sub-/superscripts, e.g. <span>. Definitely not a good idea in the light of semantics → eliminated.
• Use an UserAgent-specific stylesheet, conditional comments at best (which is what I was worried about, because i didn’t have to use them for IE ≥ 7, until now) and explictly restyle each descendant to compensate the “coefficient effect” → it’s not worth it 🙂.
• Leave it as it is so everybody can see IE has its own rules (ideally/naively this could force them to fix it in the next version) and use font-size:inherit to have at least the descendants of <sub> or <sup> be the same size by default in IE ≥ 8 → accepted.

---

solution #2, this will do the trick (sure it can be tuned up, but just the concept):

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

provided you don’t strive for maximum performance (See the * selector performance issue).