使用文本阴影时，Firefox 和 Chrome 中的行高不同答案

【问题标题】：Different line-height in Firefox and Chrome when using text-shadow使用文本阴影时，Firefox 和 Chrome 中的行高不同
【发布时间】：2012-05-26 18:57:47
【问题描述】：

由于某种原因，Firefox 和 Chrome 在使用 text-shadow 时会以不同的方式呈现 line-height。

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）它会搞砸.

Demo of the problem...有什么想法吗？

更新： 我想通了并更新了我的代码。这是一个字体问题。我正在使用 Arial，但是当我将其更改为 Verdana 时，问题就解决了。很奇怪！

The solution! :)

【问题讨论】：

请避免更新您的问题，而是添加一个答案来描述解决方案。将编辑恢复到以前的状态，以便使用提供的代码再次看到问题。
由于我的声望低于 100，系统不会让我在 8 小时内提交答案。我现在已经提交了一个答案（如下），但它不会让我在另外六个小时内接受它作为解决方案。问题仍在我的 OP 中，链接为“问题演示”，我在代码中评论了更改的内容（字体，从 Arial 到 Verdana）。这还不够吗？
绰绰有余，社区谢谢你:)

标签： google-chrome webkit css

【解决方案1】：

以文本相关单位指定行高将提供跨渲染引擎的一致行为。

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

13 / 9 = 1.444~

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

#tracker li {
    line-height: 1.444;
}

Demo on jsFiddle

【讨论】：

废话。我很快就跟他说话了。这很棒，但不幸的是它并没有为我解决问题（即使我看到它适用于 jsFiddle）。一定是我的css中的其他东西导致了问题......
我在您的 jsfiddle demo 中的 css 中添加了更多内容，以表示我拥有代码的方式。
弄清楚并更新了我上面的代码，这是一个字体问题（Arial 有问题，但 Verdana 工作正常），可能是因为尺寸小？
这里是 a demo using the exact code，因此您可以看到问题，以及如何使用 EM 解决不了问题。不管怎么说，还是要谢谢你！ :)
哦，糟糕的废话......很高兴看到您解决了这个问题，请为您的问题添加答案，以帮助遇到此问题的其他人。

【解决方案2】：

这似乎是 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"
}

【讨论】：