7

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:

IE 9 Mode

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

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

IE 8 Mode

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/
.

Stian
  • 886
  • 2
  • 9
  • 17
  • 1
    What is that element? Are you able to put up a jsFiddle that illustrates the problem? – CherryFlavourPez Apr 09 '13 at 15:05
  • 1
    possible duplicate of http://stackoverflow.com/questions/9574844/rendering-font-differs-from-ie-compared-to-ff-and-chrome – Daniel Apr 09 '13 at 15:06
  • 2
    @simpleBob The characters aren't rendered differently, only the spacing around the text.. – Stian Apr 09 '13 at 15:09
  • I have just notice this issue. And also, I have just notice that jsFiddle doesn't work in IE8. Notice Day for me. – Arkana Apr 09 '13 at 15:24
  • @Stian Yes, but if you change the font to some other core font (Arial, Helvetica), the extra "padding" goes away. Other than changing the font-face used, this cannot be "corrected" with CSS. – cimmanon Apr 09 '13 at 15:26
  • 2
    You should reset all CSS before you assign your styles. This way you eliminate the different way browsers behave with elemnts. – Kevin Lynch Apr 09 '13 at 15:08
  • Could you elaborate? What do you mean by "reset all CSS" and how do I do it? – Stian Apr 09 '13 at 15:10
  • How to reset styles. Please include that also. – Hari krishnan Apr 09 '13 at 15:11
  • CSS resets are like using a flame thrower to light a candle. On top of that, they don't even address the OP's question: what is causing the difference? – cimmanon Apr 09 '13 at 15:15
  • @cimmanon "Sometimes it's better to light a flamethrower than curse the darkness" - Terry Pratchett "Even in IE" - Any designer – Arkana Apr 09 '13 at 15:26
  • Well, I figured out what a CSS reset is, unfortunately it didn't work. – Stian Apr 09 '13 at 15:36
  • Many browser inconsistencies can be fixed by using a reset.css. Check out for more information. – Kevin Dekker Apr 10 '13 at 20:21
  • Type rendering is affected by a list of variables (OS, layout engine, font file, etc) that browsers rarely share. Take a look at [this series of articles](http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/) to learn more. – MyNameIsKo Apr 11 '13 at 17:52

2 Answers2

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.

bridgepickup
  • 116
  • 3
  • Hi, thank you for the suggestion, it made a difference! If you look at the fiddle in my OP, and then add `display: inline-block; line-height: 25px;` in the `a` styling you'll see that the border around the text shrinks. However, there's a problem.. There's still a difference between IE9 and Chrome. In IE9 the bottom border sits just below the lowest part of the g character, but in Chrome the border actually sits higher, so the low part of the g goes below the border. There's also more space above the text in Chrome. So unfortunately it seems like I can't use this solution. – Stian Apr 12 '13 at 07:00
0

Okay, so I've found a way around this problem. It's definately not ideal, but someone else in our organization has used this method so hopefully it will be OK to use it.

The solution is to force IE9 into IE8 "document mode" by adding this meta tag into the header:
<meta http-equiv="X-UA-Compatible" content="IE=8">

Now the font is displayed exactly the same way in both Chrome and IE, and my aligning problems are gone.

Stian
  • 886
  • 2
  • 9
  • 17