If you’ve ever used the HTML <sup>
tag on a web page, you’ve probably noticed that it has a tendency to do strange things in various browsers. The most common effect is that the line height of that one line of text is pushed up, leaving a small but noticeable gap in the text.
This has always irritated me, as <sup>
is a prefectly useful tag, and should be usable without messing up the appearance of a page.
After a bit of experimenting, I think I’ve found a solid, simple, cross-browser solution. All you need to do is put the following in your CSS file:
sup { position: relative; top: -3px; vertical-align: top; font-size: 90%; }
This appears to standardize the various ways that different browsers render <sup>
erscripted text, and it also eliminates that pesky line-height gap!
UPDATE 24 April 2017: Amazing to me that 9 years later this is still an issue! Here is a version that includes the tag as well:
sup, sub { position: relative; font-size: 90%; } sup { vertical-align: top; top: -3px; } sub { vertical-align: bottom; bottom: -3px; }
great man, thanks! works perfectly!
BE”H
It worked perfect.
You know things…
Thank you.
Nice, dude. That’s exactly what I was looking for.
Thanks a lot. 2 minutes to find this on Google. 2 minutes to change the CSS, upload and test (+ 1 minute to write this). So in 5 minutes the problem is fixed. Very nice of you to post this.
Thanks a lot for this tip!
My problem is now solved.
Thanks again.
Thanks, very helpful indeed.
Great – what I search for 🙂
Thanks dude! My problem solved the same way as @Rich.
Thanks, man! You rock!
Perfect. Thanks.