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;
}
![[Donate]](/wp-content/docs/images/donatebutton.gif "Make payments with PayPal - it's fast, free and secure!"){kind=small}
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.