Вопрос по css, css3 – Различная высота строки в Firefox и Chrome при использовании тени текста

11

По какой-то причине 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>

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

Tracker-webkit-firefox

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

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

Демо проблемы... Есть идеи?

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

Решение! :)

Пожалуйста, не обновляйте свой вопрос, но вместо этого добавьте ответ, чтобы изобразить решение. верните редактирование в предыдущее состояние, чтобы снова увидеть проблему с предоставленным кодом. Eliran Malka
более чем достаточно, спасибо сообществу :) Eliran Malka
Поскольку у меня менее 100 репутаций, система не позволяла мне отправить ответ в течение восьми часов. Сейчас я отправил ответ (ниже), но он не позволит мне принять его в качестве решения еще на шесть часов. Проблема все еще есть в моем OP, связанном с «Демонстрацией проблемы». и я прокомментировал в коде, что было изменено (шрифт от Arial до Verdana). Разве этого недостаточно? Richard Harris

Ваш Ответ

2   ответа
1

когда они отображаются с размерами ниже 10px. Изменение шрифта на Verdana решает проблему.

Единственной частью кода, которую я должен был изменить, было следующее объявление в CSS:

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

Решение! :)

Alternatively, It also works if you use larger font-sizes for Arial or Helvetica, как показано здесь. (But then you need to increase the height & width of the step-circles from 13px to 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"
}
​
24

ведение для всех механизмов рендеринга.

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

13 / 9 = 1.444~

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

#tracker li {
    line-height: 1.444;
}

Демо на jsFiddle

конечно, нет пота.
ой дерьмо дерьмо ... рад видеть, что вы решили это независимо, пожалуйста, добавьте ответ на свой вопрос в интересах других, сталкивающихся с этой проблемой.
Дерьмо. Я говорил с скоро. Это было блестяще, но, к сожалению, это не решило проблему для меня (хотя я вижу, что это работает на jsFiddle). Должно быть что-то еще в моем CSS, что вызывает проблему ... Richard Harris
Я добавил больше к CSS в вашемjsfiddle demo представлять, как у меня есть код. Richard Harris
Вот это да. Это абсолютно потрясающая работа! Спасибо! Richard Harris

Похожие вопросы