Различные строки в 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?)

Единственное, что я нашел, это увеличить высоту линии (от 13 пикселей до 15 пикселей), когда тень ниже (с использованием положительных чисел), но затем она закручивает ее вверх для браузеров, не являющихся веб-сайтами (Firefox и IE).

Demo of the problem ... Любые идеи?

ОБНОВЛЕНИЕ: Я понял и обновил свой код. Это была проблема с шрифтом. Я использовал Arial, но когда я сменил его на Verdana, проблема была решена. Очень странно!

The solution! :)

Answer 1

Это, кажется, проблема с шрифтами Arial и Helvetica при визуализации при размерах ниже 10 пикселей. Изменение шрифта в 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 для большей версии шрифта, используя Arial или 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

Задание высоты строки в текстовых относительных единицах обеспечит последовательное поведение по визуализации двигателей.

Просто рассчитать контейнер-высоту текста высоты отношение:

13/9 = 1,444 ~

... и применить это к соответствующему правилу в CSS:

#tracker li { 
    line-height: 1.444; 
} 

Demo on jsFiddle