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 {
    width:200px;
    color:#999;
    font:normal 12px Verdana,sans-serif;/* Swapped out Arial with Verdana */
}

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

#tracker li {
    float: left;
    margin: 0 0 0 6px;
    padding: 0;
    height: 13px;
    width: 13px;
    color: #666;
    background-color: #ccc;
    border: 1px solid #c0c0c0;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    text-align: center;
    line-height: 13px;
    font-size: 9px;
    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"}​

HTML:

<div id="tracker">
    <span class="steps">Steps <span id="current-step">1</span> of 4</span>
    <ol>
        <li id="step1" class="current"><span>Sender</span></li>
        <li id="step2" class="future"><span>Recipient</span></li>
        <li id="step3" class="future"><span>Delivery info</span></li>
        <li id="step4" class="future"><span>Line items</span></li>
    </ol>
</div>

When the text-shadow is below the text (positive numbers) it presses the text up.

Shouldn't the text be the same no matter where the shadow is rendered? (as shown in FF and IE?)

The only work-around I have found is to increase the line-height (from 13px to 15px) when shadow is below (using positive numbers), but then it screws it up for non-webkit browsers (Firefox and IE).

Demo of the problem... Any ideas?

UPDATE: I figured it out and have updated my code. It was a font issue. I was using Arial but when I changed it to Verdana the problem was solved. Very strange!

The solution! :)

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