ブラウザ間のタイプの差異を解決しますか？

Question

私の目標は、このdiv内のテキストをコンテナーのクロスブラウザーの中央に表示させることです。

これを達成できれば、より少ない画像を使用できます。この例では、クロム/ SafariとFirefoxで異なる見え方

http://jsfiddle.net/tMFaD/

注意してください。この問題は明らかに、タイプ/ラインの高さ/似ているようです（ '1'はFirefox上で高くなります）。

これは簡単にできますか？

UPDATE：これは私が解決しようとしている小さな違いです：http://cl.ly/2A2o371c2O2r3q0T0R2E

UPDATE 2：私は決定的なクロスブラウザのソリューションを見つけていないが、このスレッドでの回答の一部が来る必要がありますほとんどの人にとって十分に近い。私が使用したソリューションは、この要素に対してブラウザターゲットのルールを使用することでした。私は画像/スプライトを使用することもできます。

Answer 1

ボックスの高さに合わせて線の高さを設定し、上と下のパディングを削除することができます。それはボックスの真ん中（垂直）に揃えます。あなたはいくつかの方法でそれを行うことができます

Answer 2

：レベルまたはクロスブラウザ/クロスを取得するには：

http://jsfiddle.net/spacebeers/s9Urm/8/

EDIT：

.box { 
    font-size: 44px; 
    font-weight: bold; 
    color: white; 
    text-align: center; 
    background: pink; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 80px; 
    height: 80px; 
}​ 

.box { 
    width: 80px; 
    height: 80px; 
    font-size: 44px; 
    line-height: 80px; 
    font-weight: bold; 
    color: white; 
    background: pink; 
    text-align: center; 
} 

どちらも同じ結果が得られますOSの精度は、あなたがそれらのいくつかに別のスタイルルールを使用するか、単にイメージを使用しなければならないと思ってからです。

Answer 3

他の提案、vertical middle代わりのpaddingを制御するためにline-heightを使用します。

.box { 
    display:block; 
    font-size: 44px; 
    font-weight: bold; 
    color: white; 
    text-align: center; 
    background: pink; 
    float: left; 
    line-height:80px; 
    width:80px; 
    height:80px; 
}​