12

text-shadow を使用すると、何らかの理由で Firefox と Chrome で 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>

text-shadow がテキストの下にある場合 (正の数)、テキストを押し上げます。

Tracker-webkit-firefox

影がレンダリングされる場所に関係なく、テキストは同じであるべきではありませんか? （FFとIEに示されているように？）

私が見つけた唯一の回避策は、影が下にあるときに (正の数を使用して) 行の高さを (13px から 15px に) 増やすことですが、Webkit 以外のブラウザー (Firefox および IE) では台無しになります。

問題のデモ...アイデアはありますか？

更新: 私はそれを理解し、コードを更新しました。フォントの問題でした。Arialを使用していましたが、Verdanaに変更したら問題が解決しました。非常に奇妙な！

ソリューション！:)

4

2 に答える 2

24

行の高さをテキスト相対単位で指定すると、レンダリング エンジン間で一貫した動作が得られます。

コンテナの高さとテキストの高さの関係を計算するだけです。

13 / 9 = 1.444~

...そしてそれを CSS の関連するルールに適用します。

#tracker li {
    line-height: 1.444;
}

jsFiddle のデモ

于 2012-05-19T14:08:44.847 に答える
1

これは、10px 未満のサイズでレンダリングされた場合の Arial および Helvetica フォントの問題のようです。フォントを Verdana に変更すると、問題が解決します。

私が変更しなければならなかったコードの唯一の部分は、CSS の次の宣言でした。

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

ソリューション！:)

または、ここに示すように、Arial または Helvetica に大きなフォント サイズを使用する場合にも機能します。(ただし、ステップ サークルの高さと幅を 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"
}
​
于 2012-05-21T06:39:58.827 に答える