Wrong rendering of ^{in table with valign=top in Chrome and Safari}

Question

I have the following HTML: ```

test²

``` The problem is that in the second the `^{` 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…}

Accepted Answer

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 `&sup2;`. 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;
}
```

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

Solution

Problem