Mozillaでdivを修正する方法 - Chrome上で正常に動作しています

Question

私の問題に画像を添付しました。Firefoxは自分の画像に余分な拡張子を与えています。下の画像部分。イメージはスタイルの一部として背景イメージとして設定され、グレービットはテーブルで定義されます。

http://s8.postimage.org/rc26rtbr7/profile.png

はここ

div.frontpage_title { 
    padding: 5px; 
    font-weight: bold; 
    font-size: 12px; 
    background-image: url(../images/frontpage_tab.png); 
    color: #fff; 
} 

...おかげに関してスタイルのコードです。

Answer 1

divの高さを設定します。

画像が20px高い場合は、 高さ：10px;/* 20ピクセル-5pxの-PX（パディングトップとボトム）*/

Answer 2

私はあなたのタイトルのdivは設定された高さがないと思います。これは、ブラウザがテキストをどのようにレンダリングするかによって、divの高さがわずかに異なることを意味します。あなたは、あなたのdivに高さを設定することにより、この問題を解決することができます：

div.frontpage_title { 

    height: 14px; // Set div height 
    line-height: 14px; // Optional, will vertically center text 

    padding: 5px; 
    font-weight: bold; 
    font-size: 12px; 
    background-image: url(../images/frontpage_tab.png); 
    color: #fff; 
} 

「愚かな下の画像の一部は、」余分な高さのために繰り返しあなたの背景です。合計高さは、タブ画像の高さと一致する必要があります。

もう1つの選択肢は、タブ画像を例えば10pxのように背の高いものにすることです。次に、あなたのタブがもう少し背が高い場合（< 10ピクセル）、繰り返しは表示されません。 background-repeatをnoneに設定することもできますが、これは繰り返しイメージの代わりにギャップがあることを意味します。

Answer 3

ストップ背景には使用を繰り返す：

background-repeat: no-repeat; 

これは、HTMLコードを見て