How to compensate for difference in baseline rendering between Webkit and Gecko?

Question

Given a link or any inline element with a background color, I'd like to vertically center the text to the pixel

<a href="#">Hello world</a>

a { line-height: 22px; font-size: 16px; background: #f00; color: #fff; text-decoration: none; }

http://jsfiddle.net/MDdzH/9/

It seems like Firefox's baseline rendering is different by a single pixel and I'm wondering how to compensate without resorting sniffing the browser and injecting a browser-specific stylesheet? I'd be happy with resorting to a vendor prefixed solution.

Answer 1

Differences in cross-browser baseline rendering will most likely be down to a couple of things:

Fonts render differently between browsers. This may result in very slightly different kerning and line-height.

Also, I think some browsers try to output pixels to decimal places for subpixel rendering or something similar. That may cause very slight discontinuity between browsers.

The answer is to make sure any font ems you use output whole numbers. Seeing as your example uses whole pixel values, I would guess this may be down to font rendering.

If you want your link to be an exact height, give it the CSS:

a { 
  display: block;
  height: 22px;
  overflow: hidden; }

That would give it an exact height not relying on the font rendering.