Farklı line-height Nedense metin-gölge

Question

kullanarak, Firefox ve Chrome farklı çizgi yüksekliği hale.

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: o metin yukarı basar

<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> 

metin gölge metni (pozitif sayılar) altındadır.

metin olursa olsun gölge oluşturulduğu yere aynı olması gerekmez mi? (FF ve IE'de gösterildiği gibi?)

Bulduğum tek iş, gölgenin altında (pozitif sayılar kullanarak) satır yüksekliğini (13px'ten 15px'e) artırmaktır, ancak sonra vidalar. Webkit olmayan tarayıcılar için (Firefox ve IE).

Demo of the problem ... Herhangi bir fikir?

UPDATE: Bunu çözdüm ve kodumu güncelledim. Bir yazı tipi sorunu oldu. Ben Arial kullanıyordum ama Verdana olarak değiştirdim sorun çözüldü. Çok ilginç! Oluşturma motorları arasında tutarlı davranış sağlayacaktır metin nispi birimlerindeki satır yükseklik belirtmek

The solution! :)

Answer 1

Bu 10px altındaki boyutlarda işlenmiş zaman Arial ve Helvetica yazı ile ilgili bir sorun olarak görünmektedir. Yazı tipini Verdana olarak değiştirmek sorunu giderir.

Ben değiştirmek zorunda kod sadece bir parçası CSS aşağıdaki beyanı oldu:

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

The solution! :)

Alternatif, daha büyük kullanmak olduğunda da işe yarar Arial veya Helvetica için yazı-boyutları, as demonstrated here. (ancak daha sonra 13 piksel den 14px için adım çevrelerinin yüksekliği & genişliğini arttırmak gerekir.)

İşte Arial veya Helvetica kullanarak, büyük yazı tipi versiyonu için CSS:

#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

.

Basitçe kapsayıcı yüksekliğini hesaplamak metin yükseklikte ilişkisi:

13/9 = 1,444 ~

... ve CSS ilgili kuralın bu geçerlidir:

#tracker li { 
    line-height: 1.444; 
} 

Demo on jsFiddle