Diferente altura de línea en Firefox y Chrome al usar text-shadow

Question

Por alguna razón, Firefox y Chrome representan la altura de línea de forma diferente cuando se usa 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> 

Cuando la sombra de texto está por debajo de los de texto (números positivos) que presiona el texto hacia arriba.

¿No debería ser el texto de la misma, no importa donde se representa la sombra? (Como se muestra en FF e IE?)

El único problema que he encontrado es aumentar la altura de la línea (de 13px a 15px) cuando la sombra está por debajo (usando números positivos), pero luego lo arruina para navegadores que no sean webkits (Firefox e IE).

Demo of the problem ... ¿Alguna idea?

ACTUALIZACIÓN: Lo descubrí y he actualizado mi código. Fue un problema de fuente. Estaba usando Arial pero cuando lo cambié a Verdana el problema fue resuelto. ¡Muy extraño!

The solution! :)

Answer 1

Parece ser un problema con las fuentes Arial y Helvetica cuando se procesan en tamaños inferiores a 10 px. Cambiar la fuente a Verdana soluciona el problema.

La única parte del código que tenía que cambiar era la siguiente declaración en el CSS:

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

The solution! :)

Alternativamente, También funciona si se utiliza más grande tamaños de letra para Arial o Helvetica, as demonstrated here. (Pero luego necesita aumentar la altura & ancho de los círculos paso a paso desde 13px hasta 14px.)

Aquí está el CSS para la versión de letra más grande, utilizando Arial o 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" 
} 
​ 

Answer 2

Especificación de la altura de la línea en unidades de texto relativa proporcionará comportamiento consistente a través de motores de renderizado.

calcular simplemente el contenedor altura al texto de la altura relación:

13/9 = 1,444 ~

... y aplicar eso a la norma pertinente en el CSS:

#tracker li { 
    line-height: 1.444; 
} 

Demo on jsFiddle