12

The problem is that Firefox and WebKit based browsers seem to align text vertically in different ways when contained in an element that has an even height/line-height and the font-size is uneven (or vice versa). I have looked at some similar threads, but I haven't really seen any great explanations for my question.

Consider the following example:

.box {
  font-size: 15px;
  font-family: Helvetica, Arial;
  background-color: Blue;
  height: 20px;
  width: 60px;
  color: White;
  line-height: 20px;
}

<div class="box">
  A text.
</div>

Example showing vertical alignment difference between Firefox and Chrome.

Is there any way to fix this? Is there any "text-align" property or something that I missed?

gfullam
  • 11,531
  • 5
  • 50
  • 64
Olaj
  • 1,782
  • 4
  • 19
  • 36

4 Answers4

14

This is due to differences in how browsers handle subpixel text positioning. If your line-height is 20 pixels but font-size is 15 pixels, then the text needs to be positioned 2.5 pixels from the top of the line box. Gecko actually does that (and then antialiases or snaps to the pixel grid as needed on painting). WebKit just rounds positions to integer pixels during layout. In some cases, the two approaches give answers that differ by a pixel. Unless you're comparing them side-by-side, how can you even tell there's a difference?

In any case, making sure that your half-leading is an integer (i.e. that line-height minus font-size is even) will make the rendering more consistent if you really need that.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
9

This is browser rendering issue. Use line-height 1px less than the given height, for example:

    .box
{
   background-color: Blue;
   color: White;
   font-family: Helvetica,Arial;
   font-size: 15px;
   height: 18px;
   line-height: 17px;
   width: 60px;
}
Raheel Ayub
  • 193
  • 5
  • This works well, but only for non-input / button elements. I haven't figured out exactly why yet, but setting a fixed height on an input element of type button, submit or reset or button element of any type sets the outer-width of the element, not the inner-width as is the case with other standard elements including a, span and div. – Joey T Apr 21 '12 at 02:01
1

If you are looking for a way to do an exact vertical align, check out Stack Overflow question Problem with vertical-align: middle; - I described a solution there.

If you want an answer why Firebug and Chrome display this differently, this will be a bit more complicated. Line-height alignment is based on font-line rendering and fonts can be handled in a very different way across the browsers. For example, font-smoothing and font-weight can really mess with your page.

Also, are you using CSS reset for this page? It contains font related adjustments as well, and it may help you to overcome cross-browser issues. Refer to CSS Tools: Reset CSS.

Community
  • 1
  • 1
vlad saling
  • 375
  • 2
  • 9
0

Ugh, terrible but true! I just ran into this trying to create tiny count bubbles on an icon - so small that I had to get right next to text so every pixel counted. Making the line-height 1x less than text-size leveled the display field between FF and Chrome.

mahalie
  • 2,647
  • 20
  • 21
  • 1
    Lol, +1 because I'm on the same situation of making "tiny count bubbles" (number of comments kind of thing) and indeed one pixel off is noticeable. – Camilo Martin Aug 28 '12 at 17:21