使用文字陰影時，Firefox和Chrome中的線條高度不同

Question

由於某些原因，Firefox和Chrome在使用文字陰影時呈現線條高度不同。

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> 

當文字陰影是下面的文字（正數），其壓文本了。

不宜文本是相同的，無論身在何處的陰影渲染？ （如FF和IE所示）

我發現的唯一解決方法是在陰影低於（使用正數）時增加行高（從13px到15px），但隨後將其擰緊適用於非webkit瀏覽器（Firefox和IE）。

Demo of the problem ...任何想法？

更新： 我想通了，並已更新我的代碼。這是一個字體問題。我正在使用Arial，但是當我將其更改爲Verdana時，問題解決了。很奇怪！

The solution! :)

Answer 1

在Arial和Helvetica字體以10px以下的尺寸呈現時，這似乎是個問題。將字體更改爲Verdana可以解決問題。

的代碼，我不得不改變的唯一部分是在CSS以下聲明：

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

The solution! :)

或者， 如果使用較大的它也可以Arial或Helvetica的字體大小，as demonstrated here。 （但是，你需要將高度爲&的步幅從13px增加到14px。）

這裏有一個較大的字體版本的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

指定的文本相對單位行高度將提供跨渲染引擎一致的行爲。

簡單地計算容器高度爲文本高度的關係：

9分之13= 1.444〜

...並應用在CSS的相關規則：

#tracker li { 
    line-height: 1.444; 
} 

Demo on jsFiddle