Different line-height in Firefox and Chrome when using text-shadow

Question

For some reason, Firefox and Chrome render line-height differently when using text-shadow.

CSS:

#tracker {
           


        

Answer 1

Specifying the line height in text-relative units will provide consistent behavior across rendering engines.

Simply calculate the container-height to text-height relation:

13 / 9 = 1.444~

... and apply that to the relevant rule in the CSS:

#tracker li {
    line-height: 1.444;
}

Demo on jsFiddle

Answer 2

This appears to be an issue with Arial and Helvetica fonts when rendered at sizes below 10px. Changing the font to Verdana fixes the problem.

The only part of the code I had to change was the following declaration in the CSS:

#tracker { 
    /* from this...
    font:normal 12px Arial,Helvetica,sans-serif;*/ 
    /* to this...*/
    font: normal 12px Verdana, sans-serif;
}

The solution! :)

Alternatively, It also works if you use larger font-sizes for Arial or Helvetica, as demonstrated here. (But then you need to increase the height & width of the step-circles from 13px to 14px.)

Here's the CSS for the larger font version, using Arial or Helvetica:

#tracker { 
    /* this has changed */
    font: normal 14px Helvetica, Arial, sans-serif;
    /* the rest is the same as before */
    width: 200px;
    color: #999;
}

#tracker ol {
    float: right;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style: none;
}

#tracker li { 
    /* these were changed */
    height: 14px;
    width: 14px;
    font-size: 11px;
    /* the rest is the same as before */
    float: left;
    margin: 0 0 0 6px;
    padding: 0;
    border: 1px solid #c0c0c0;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    text-align: center;
    line-height: 1.45em;
    color: #666;
    background-color: #ccc;
    text-shadow: 1px 1px 1px #fff;
    overflow: hidden;
}

#tracker li.current {
    color: #fff;
    text-shadow: -1px -1px 1px #033e69;
    font-weight: bold;
    background-color: #13699e;
    border: 1px solid #369;
}

#tracker li span {
    display: none;
}

#step1:before {
    content: "1"
}

#step2:before {
    content: "2"
}

#step3:before {
    content: "3"
}

#step4:before {
    content: "4"
}
​