Question

出于某种原因，使用text-shadow时，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？中所示）

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

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

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

The solution! ：）

Answer 1

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

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

13/9 = 1.444~

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

#tracker li {
    line-height: 1.444;
}

<强> Demo on jsFiddle

Answer 2

当以低于10px的尺寸渲染时，这似乎是Arial和Helvetica字体的问题。将字体更改为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。）

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

#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"
}

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

2 个答案: