Различная высота строки в Firefox и Chrome при использовании text-shadow.

По какой-то причине Firefox и Chrome отображают высоту строки по-разному при использовании text-shadow.

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:

Steps 1 of 4
  1. Sender
  2. Recipient
  3. Delivery info
  4. Line items

Когда text-shadow находится под текстом (положительные числа), он прижимает текст вверх.

Tracker-webkit-firefox

Разве текст не должен быть одинаковым, где бы ни отображалась тень? (как показано в FF и IE?)

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

Демонстрация задачи... Есть идеи?

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

Решение!:)

11
задан Richard Harris 19 May 2012 в 15:08
поделиться