Unterschiedliche Zeilenhöhe in Firefox und Chrome bei Verwendung von Text-Schatten

Question

Aus irgendeinem Grund rendern Firefox und Chrome Zeilenhöhe unterschiedlich, wenn Text-Schatten verwendet wird.

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> 

Wenn der Text-Schatten unter dem Text (positive Zahlen) ist es den Text nach oben drückt.

Sollte der Text nicht gleich sein, egal wo der Schatten wiedergegeben wird? (wie in FF und IE gezeigt?)

Die einzige Problemumgehung, die ich gefunden habe, ist die Zeilenhöhe (von 13px zu 15px) zu erhöhen, wenn der Schatten unter (positive Zahlen) ist, aber dann es vermasselt für Nicht-Webkit-Browser (Firefox und IE).

Demo of the problem ... Irgendwelche Ideen?

UPDATE: Ich habe es herausgefunden und habe meinen Code aktualisiert. Es war ein Schriftproblem. Ich benutzte Arial, aber als ich es zu Verdana änderte, war das Problem gelöst. Sehr eigenartig!

The solution! :)

Answer 1

Dies scheint ein Problem mit Arial- und Helvetica-Schriftarten zu sein, wenn sie in Größen unter 10 Pixel gerendert werden. Ändern der Schriftart auf Verdana behebt das Problem.

Der einzige Teil des Codes Ich war in der CSS die folgende Erklärung musste sich ändern:

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

The solution! :)

Alternativ, Es funktioniert auch, wenn Sie größere verwenden Schriftgrößen für Arial oder Helvetica, as demonstrated here. (Aber dann müssen Sie die Höhe & Breite der Step-Kreise von 13px auf 14px erhöhen.)

Hier ist die CSS für die größere Schrift-Version, mit Arial oder 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

die Zeilenhöhe in Text relativen Einheiten angeben wird über Rendering-Engines konsistentes Verhalten liefern.

einfach die Container-Höhe berechnet Bezug auf Text-height:

13/9 = 1,444 ~

... und dann Anwendung, wenn auf die entsprechende Regel in der CSS:

#tracker li { 
    line-height: 1.444; 
} 

Demo on jsFiddle