使用文本阴影时,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？中所示)

我发现的唯一解决方法是在阴影低于(使用正数)时增加行高(从13px到15px),但随后它会为非webkit浏览器(Firefox和IE)搞砸.

演示问题 ......有什么想法吗？

更新: 我想出来并更新了我的代码.这是一个字体问题.我正在使用Arial但是当我把它改成Verdana时,问题就解决了.很奇怪!

解决方案!:)

Answer 1

以文本相对单位指定行高将在渲染引擎之间提供一致的行为.

只需计算容器高度与文本高度的关系:

13/9 = 1.444~

...并将其应用于CSS中的相关规则:

#tracker li {
    line-height: 1.444;
}

演示jsFiddle

Answer 2

当以低于 10 像素的尺寸渲染时，这似乎是 Arial 和 Helvetica 字体的问题。将字体更改为 Verdana 可以解决该问题。

\n\n

我唯一需要更改的代码部分是 CSS 中的以下声明：

\n\n

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

\n\n

解决方案！:)

\n\n

或者，\n如果您对 Arial 或 Helvetica 使用较大的字体大小，也可以使用，如此处所示。\n（但是您需要将阶梯圆的高度和宽度从 13 像素增加到 14 像素。）

\n\n

这是使用 Arial 或 Helvetica 的较大字体版本的 CSS：

\n\n

#tracker { \n    /* this has changed */\n    font: normal 14px Helvetica, Arial, sans-serif;\n    /* the rest is the same as before */\n    width: 200px;\n    color: #999;\n}\n\n#tracker ol {\n    float: right;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n    list-style: none;\n}\n\n#tracker li { \n    /* these were changed */\n    height: 14px;\n    width: 14px;\n    font-size: 11px;\n    /* the rest is the same as before */\n    float: left;\n    margin: 0 0 0 6px;\n    padding: 0;\n    border: 1px solid #c0c0c0;\n    border-radius: 9px;\n    -moz-border-radius: 9px;\n    -webkit-border-radius: 9px;\n    text-align: center;\n    line-height: 1.45em;\n    color: #666;\n    background-color: #ccc;\n    text-shadow: 1px 1px 1px #fff;\n    overflow: hidden;\n}\n\n#tracker li.current {\n    color: #fff;\n    text-shadow: -1px -1px 1px #033e69;\n    font-weight: bold;\n    background-color: #13699e;\n    border: 1px solid #369;\n}\n\n#tracker li span {\n    display: none;\n}\n\n#step1:before {\n    content: "1"\n}\n\n#step2:before {\n    content: "2"\n}\n\n#step3:before {\n    content: "3"\n}\n\n#step4:before {\n    content: "4"\n}\n\xe2\x80\x8b\n

\n