CSS: Subscript and Superscript quick snippet

Subscript (<sub>) and Superscript (<sup>) html tags act quirky, if not styled (different behavior from browser to browser):

  1. line-height is affected
  2. font-size varies crazy
  3. position is jumping.

Here’s a small snippet (apply directly, keep out of reach of children. Don’t swallow!):

sub { height:0; line-height:1; vertical-align:baseline; _vertical-align:bottom; position:relative; font-size:0.7em; }
sup { bottom:.5em; }
sub { top:.25em; }

God bless the variety of browsers, standards and IE6. Life would be boring without those.

Filed in: Uncategorized