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

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;}

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;}

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