使用文字阴影时，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