I was recently updating a clients site by adding in some ® symbols as superscripts and subscripts. This resulted in some pretty nasty line heights as you can see below.

I searched on Google and found a few methods to correct this issue. They worked fine in Firefox but not in IE 6 and sometimes 7.

After experimenting a bit, I found a way that corrects this issue with CSS and works in Firefox, Opera, Safari, IE 6 and 7.

sup
{

    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    top: -0.4em;
}

sub
{
    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    bottom: -0.4em;
}

Just adjust the position and font size to suit your taste.