firefoxとIEの背景画像の位置を合わせる

質問

背景画像の中央にテキストがくるよう指定するのに、CSSでline-heightで調整しています。

firefoxではピタリと中央にきますが、IEだと少しずれます。

paddingで調整するとIEだと中央にきますが、firefoxだと少しずれます。

両ブラウザー共にテキストを中央配置する方法を教えてください。

よろしくお願いします。

回答No.3

metametamu

２さんの回答の補足ですが、別々のスタイルを指定するなら2枚のcssに分ける方が良いですよ。
他の方法はあまり安心して使えないと思います。

FirefoxとIEのズレが1pxぐらいの場合、spanで囲ってvertical-alignで調整するとズレが吸収できます。
もっとズレる場合はおそらくpaddingやline-height以外のものが影響していると思います。

・marginやpaddingのデフォルトスタイルを上書きする
・zoom:1;を指定する

おそらくどちらかで対応できるんじゃないでしょうか。
ソースが無いのでなんとも言えませんけど。

回答No.2

noris02

No1です。 画像でした。失礼しました。
テキストも
.class_name{
/*padding 等 firefox用で真ん中に調整*/
}
<!--[if IE]>
/*IE用*/
.class_name{
/*padding 等 IE用でIEの真ん中に調整*/}
<![endif]-->

htmlで cssを読み込む際、IE用の微調整で
2つのファイル(メインのcss・IE専用)を用意して
読み込ませて 調整できます。

<link rel="stylesheet" href="....... style.css." />
<!--[if IE]>
<link rel="stylesheet" href="........ style_for_IE.css" />
<![endif]-->

先に IE専用を 読み込ませて メインを読むと
cssは 後の指定に上書きすることになりますので IE専用は　後に読み込ませます。

お礼

ありがとうございます。

同じCSS内に記述したのですが、反映されないようです。

CSSを分けないといけないのでしょうか？

同一のCSS内に記述して統一させたいと思います。

回答No.1

noris02

background-image:url(./ほにゃらら);
background-repeat:no-repeat;
background-position:center 0;

もしくは
.class_name{
background-image:url(/ほにゃらら);
background-image::no-repeat;
background-position:center 0;
}
<!--[if IE]>
/*IE用*/
.class_name{
background-image:url(/ほにゃらら);
background-image::no-repeat;
background-position:○px; 0;
}
<![endif]-->