Z jakiegoś powodu Firefox i Chrome inaczej renderują wysokość linii podczas używania cienia tekstu.

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>

Gdy cień tekstu znajduje się poniżej tekstu (liczby dodatnie), naciska tekst w górę.

Czy tekst nie powinien być taki sam bez względu na to, gdzie jest renderowany cień? (jak pokazano w FF i IE?)

Jedynym obejściem, jakie znalazłem, jest zwiększenie wysokości linii (z 13px do 15px), gdy cień jest poniżej (przy użyciu liczb dodatnich), ale potem przykręca go dla przeglądarek innych niż webkit (Firefox i IE).

Demo problemu... Jakieś pomysły?

AKTUALIZACJA: Zrozumiałem to i zaktualizowałem swój kod. To był problem z czcionkami. Korzystałem z Arial, ale kiedy zmieniłem go na Verdana, problem został rozwiązany. Bardzo dziwny!

Rozwiązanie! :)