Chiều cao dòng khác nhau trong Firefox và Chrome khi sử dụng bóng văn bản

Question

Vì một số lý do, Firefox và Chrome hiển thị chiều cao dòng khác nhau khi sử dụng bóng văn bản.

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> 

Khi text-shadow là dưới văn bản (số dương) nó sẽ đè văn bản lên.

nên không phải là văn bản là như nhau bất kể cái bóng được trả lại? (như được hiển thị trong FF và IE?)

Chỉ làm việc xung quanh tôi đã tìm thấy là tăng chiều cao dòng (từ 13px đến 15px) khi bóng ở dưới (sử dụng số dương), nhưng sau đó vít nó lên cho các trình duyệt không phải webkit (Firefox và IE).

Demo of the problem ... Bất kỳ ý tưởng nào?

CẬP NHẬT: Tôi đã tìm ra và đã cập nhật mã của mình. Đó là một vấn đề về phông chữ. Tôi đã sử dụng Arial nhưng khi tôi thay đổi nó để Verdana vấn đề đã được giải quyết. Rất lạ!

The solution! :)

Answer 1

Điều này dường như là một vấn đề với phông chữ Arial và Helvetica khi được hiển thị ở kích thước dưới 10px. Thay đổi phông chữ thành Verdana sẽ khắc phục sự cố.

Phần duy nhất của mã tôi đã phải thay đổi là việc kê khai sau trong CSS:

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

The solution! :)

Ngoài ra, Nó cũng hoạt động nếu bạn sử dụng lớn hơn kích thước phông chữ cho Arial hoặc Helvetica, as demonstrated here. (Nhưng sau đó bạn cần tăng chiều cao & chiều rộng của các vòng tròn từ 13px đến 14px.)

Đây là CSS cho phiên bản phông chữ lớn hơn, sử dụng Arial hoặc 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

Xác định chiều cao dòng trong các đơn vị văn bản liên quan sẽ cung cấp cho hành vi nhất quán trên cơ rendering.

Đơn giản chỉ cần tính toán container chiều cao văn bản chiều cao mối quan hệ:

13/9 = 1,444 ~

... và áp dụng được cho các quy tắc liên quan trong CSS:

#tracker li { 
    line-height: 1.444; 
} 

Demo on jsFiddle