IE ignores font-size for HTML SUB elements?

Question

I'm usually well-versed in CSS but this issue surprised me...

I have some simple markup consisting of some text and a sub text:

<p>I am a main text<sub>This is a sub text</sub></p>

I have set the CSS so that by default, all elements get a font-size of 12px. However, for sub elements I am overruling this:

sub { color:#999; font-size:11px; }

Firefox respects the 11px, IE 8 does not, it renders it much smaller, but it does respect the color overrule. This is the last thing I would expect when setting a FIXED font size. I can assure that there are no other CSS rules conflicting with this.

If I increase the font-size in CSS to 12px, IE will render it at 11px, but then in Firefox it is too big. Something strange is going on with the SUB element in IE.

I do have a solution, if I use something else to mark the sub text, for example a h3, both Firefox and IE do render the font size correctly. If there is no better solution I will go for that direction, but I'm simply curious if there is a better solution? Also I like the way the markup currently looks.

Answer 1

The way I always worked around IE's non-standards-compliance was to check the user-agent and return a different stylesheet based on whether it was IE or otherwise. Then your IE stylesheet can do whatever it needs to in order to make IE render it correctly, without breaking it for everyone else.

Answer 2

Since there does not seem to be a CSS fix I have settled on using the <small> tag instead of the <sub> tag. This works fine, although it does make my markup less clear.

Answer 3

Can you replace that sub with a span?