Wrong rendering of <sup> in table with valign=top in Chrome and Safari

Question

I have the following HTML:

<p style="font-family:Verdana">test<sup>2</sup></p>
<p style="font-family:Verdana;vertical-align:top">test<sup>2</sup></p>

The problem is that in the second

the <sup> is no longer positioned above the text but a few pixels lower. In essence the vertical-align:top raises all text except the superscripted to the top:

This doesn't happen in Firefox, Opera but in Chrome and Safari (all Windows) and not with some fonts (like Times New Roman).

Do you think this is a problem with the font or actually a bug in Webkit? There is already a bug reported and I attached my test case but I don't know how quickly it'll be solved since that bug has been reported over three years ago...

Do you have an idea for a workaround? If possible with only CSS changes.

UPDATE

I tried the suggested solutions and most of them display the same as using a sup tag.

I created a fiddle to show the different implementations.

The Chrome bug report: http://code.google.com/p/chromium/issues/detail?id=23634

Answer 1

Avoid using the sup element, since it causes various problems and never really produces a typographically correct superscript.

If you only need superscript 2 in your document, just use the SUPERSCRIPT TWO character either as such, “²”, or using the entity reference ². This means using a text character designed by a typographer to suit the font design.

If you need superscripts of various kinds and cannot represent all of them as superscript characters, it is better to use span elements and styling that reduces font size and raises the characters – using relative positioning rather than vertical-align (which tends to cause uneven line spacing and may sometimes interfere with vertical alignment set elsewhere). Example:

span.sup {
    font-size: 80%;
    position: relative;
    bottom: 1ex;
}

Answer 2

I found it much simpler especially if you already have everything added as elements to to set a global style for all sup elements in your .css file. like so.

sup {font-size: 80%; position: relative;bottom: .8ex;}

Answer 3

On my opinion, it is better to use ² entity than css styling because of semantical meaning.