How to make the font "Lucida Sans Unicode" render the same way in IE9 and Chrome?

Question

I'm using the font "Lucida Sans Unicode" on a project, and I've encountered an issue with it. In IE9 there is some space beneath the text, and I don't know why this is happening. In Chrome there is not as much space. Here is an example, the border you see is from the "Select element on click" function in the developer tool in IE9:

This is in Browser mode: IE9 and Document Mode: IE9 Standards.

And this is Browser mode: IE8 and Document Mode: IE8:

As you can see there is less space beneath the "p". Chrome displays it the same way as IE8 mode.

The difference in rendering is causing trouble when I want to align stuff; when it's OK in one browser it's not OK in the other.

Does anyone know why this is happening and, more importantly, how to fix it?

Thanks in advance for all replies.

EDIT:
Fiddle: http://jsfiddle.net/94Tq9/
.

Answer 1

I can't tell you why it's doing this, but it's worth noting that this is a rendering issue and not a layout issue. In other words, the line-height of paragraphs is not affected, just where IE thinks it should draw a border. (I didn't check clickable area, sorry.)

If, as your image suggests, you can add display:inline-block; to the anchor style, IE8 and IE9 will render the same way as long as you have the line-height set.

I'm currently banished to an IE only existence (long story), so I can't say if this works on Chrome too.