relative font-size of or and their descendants in IE

问题

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  and  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  and  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  and  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  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  element down to its descendants – so 1st-level descendant has the font size around 70% (≅ 0.7 × 100% of its  parent), 2nd-level descendant has the font size around 50% (≅ 0.7 × 0.7 × 100% of its  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  element, but the  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.

回答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. . 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  or  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).

回答2:

I didn't test it but it works so far:

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

来源：https://stackoverflow.com/questions/6804383/relative-font-size-of-sub-or-sup-and-their-descendants-in-ie

标签

internet-explorer

font-size

sup

relative font-size of <sub> or <sup> and their descendants in IE

问题

回答1:

回答2: