使用文字阴影时，Firefox和Chrome中的线宽不同 [英] Different line-height in Firefox and Chrome when using text-shadow

问题描述

由于某些原因，Firefox和Chrome在使用文字阴影时会以不同的方式呈现行高。

CSS：

  #tracker {
 width：200px; 
 color：＃999; 
 font：normal 12px Verdana，sans-serif; / *换掉带有Verdana的Arial * / 
} 
 
 #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>步骤< span id =current-step> 1< / span>的4< / span> 
< ol> 
< li id =step1class =current>< span>发件人< / span>< / li& 
< li id =step2class =future>< span>收件人< / span>< / li> 
< li id =step3class =future>< span>传送资讯< / span>< / li> 
< li id =step4class =future>< span>订单项< / span>< / li& 
< / ol> 
< / div> 
  

当文本阴影低于文本p>

不管阴影呈现在哪里，文本都不应该是相同的吗？ （如FF和IE？所示）

我发现的唯一的解决办法是当阴影低于时，增加行高（从13px到15px）使用正数），但后来它为非webkit浏览器（Firefox和IE）拧紧。

演示问题 ...任何想法？

更新：
我想出来并更新了我的代码。这是一个字体问题。我使用Arial，但当我把它改为Verdana的问题解决了。很奇怪！

解决方案！ ：）

解决方案

这似乎是Arial和Helvetica字体的问题， 。将字体更改为Verdana可解决此问题。

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

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

解决方案！ ：）

$ b如果您对Arial或Helvetica使用较大的字体， 如此处所示 。
（但是你需要将步骤圆的高度和宽度从13px增加到14px。）

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

  #tracker {
 / * this has changed * / 
 font：normal 14px Helvetica，Arial，sans-serif; 
 / *其余的和以前一样* / 
 width：200px; 
 color：＃999; 
} 
 
 #tracker ol {
 float：right; 
 margin：0; 
 padding：0; 
 white-space：nowrap; 
 list-style：none; 
} 
 
 #tracker li {
 / *这些更改了* / 
 height：14px; 
 width：14px; 
 font-size：11px; 
 / *其余的和以前一样* / 
 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
} 
 
  

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

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>

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?)

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).

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!

The solution! :)

解决方案

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.

The only part of the code I had to change was the following declaration in the 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.)

Here's the CSS for the larger font version, using Arial or 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"
}
​

这篇关于使用文字阴影时，Firefox和Chrome中的线宽不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！