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

Different line-height in Firefox and Chrome when using text-shadow

提问by Richard Harris

For some reason, Firefox and Chrome render line-height differently when using text-shadow.

出于某种原因，Firefox 和 Chrome 在使用 text-shadow 时呈现不同的行高。

CSS:

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:

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>

When the text-shadow is below the text (positive numbers) it presses the text up.

当文本阴影低于文本（正数）时，它会将文本向上压。

Shouldn't the text be the same no matter where the shadow is rendered? (as shown in FF and IE?)

无论在哪里渲染阴影，文本都不应该相同吗？（如FF和IE所示？）

The only work-around I have found is to increase the line-height (from 13px to 15px) when shadow is below (using positive numbers), but then it screws it up for non-webkit browsers (Firefox and IE).

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

Demo of the problem... Any ideas?

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

UPDATE:I figured it out and have updated my code. It was a font issue. I was using Arial but when I changed it to Verdana the problem was solved. Very strange!

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

The solution!:)

解决方案！:)

采纳答案by Richard Harris

This appears to be an issue with Arial and Helvetica fonts when rendered at sizes below 10px. Changing the font to Verdana fixes the problem.

这似乎是 Arial 和 Helvetica 字体在以低于 10 像素的大小呈现时的问题。将字体更改为 Verdana 可以解决此问题。

The only part of the code I had to change was the following declaration in the CSS:

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

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

The solution!:)

解决方案！:)

Alternatively, It also works if you use larger font-sizes for Arial or Helvetica, as demonstrated here. (But then you need to increase the height & width of the step-circles from 13px to 14px.)

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

Here's the CSS for the larger font version, using Arial or Helvetica:

这是较大字体版本的 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"
}
?

回答by Eliran Malka

Specifying the line height in text-relative units will provide consistent behavior across rendering engines.

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

Simply calculate the container-height to text-height relation:

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

13 / 9 = 1.444~

13 / 9 = 1.444~

... and apply that to the relevant rule in the CSS:

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

#tracker li {
    line-height: 1.444;
}

Demo on jsFiddle

jsFiddle 上的演示