ＩＥ CSSマウスオーバー背景イメージ表示ズレ

質問

CSSを使ってリンクをマウスオーバーしたら左側に配置してある背景イメージをずらしたいと思って以下のように記述しました。
IEは日本語だとちゃんと意図とおりに動いてくれるのですが、英語(半角英数)にすると通常の状態で少し上の方に背景イメージがずれて、本来マウスオーバー時に出現してほしいところがはみ出てきてしまいます。
つまり英語と日本語で表示位置にズレが生じてしまっています。何か対策を知っている方はいますでしょうか？
ちなみにfirefoxでは日本語英語ともに差異なく意図したとおりに表示してくれます。

CSS↓
a.btn{padding: 1px 0px 1px 13px;background: url("img.gif") no-repeat left top;}
a:hover.btn{background-position: left -13px;}
a:active.btn{background-position: left -26px;}
HTML↓
<a href="index.html" class="btn">テスト</a>

環境
windowsXP
firefox2.0.0.14
IE7

回答No.3

abril · ベストアンサー

提供して頂いたソースと、サイズを合わせた適当な画像をつくり、Windows XP上で実際に検証してみました。
確かに、各ブラウザのフォントの種類や表示サイズをディフォルトのままで比較した場合、Firefox2.0～では丁度良い具合に見えていますが、IE7.0/6.0はいずれも質問者様と同様の現象が現れました。表示結果をよく見てみると、背景画像の描画エリアが、Firerfoxでは日本語・半角英数字（大文字・小文字問わず）で垂直方向の基点が同じなのですが、IEの場合は日本語と半角英数字で異なり、後者の場合は若干（1pxぐらい）上の位置からレンダリングされている様です。
<p class="hoge">
<a href="index.html" class="btn">test</a>
<a href="index.html" class="btn">TEST</a>
<a href="index.html" class="btn">テスト</a>
<a href="index.html" class="btn">テストtestTEST</a>
</p>
とでもして、p.hogeにボーダーを定義してみると、上ボーダーからの背景画像レンダリング開始位置迄の余白の違いがよくわかります。

ということで、本件はブラウザのディフォルトの仕様に依存してしまうという結果の様ですね。

ただ、実際にソースを頂いて検証していて思ったのですが、現在のスタイルの設定方法ではちょっとまずい事になるかと思います。何故なら、背景画像の描画領域が絶対値で固定されて且つリピートしないのに対し、テキストの方は常に可変状態に置かれているからです。つまり、現在は「たまたま」Firefoxでは背景画像の描画領域がぴったりに見えているかも知れませんが、フォントの表示サイズの変更に依存して全く違う結果になってしまうからです。試しに、Firefox側で表示文字サイズを1,2段階上げてみて下さい。日本語も半角英数字も同様に下に本来a:hoverの時に表示されて欲しい画像領域が（上に繰り上がって）見えてしまいます。

現在の様な、背景画像を一枚にして表示位置をずらす事によって切り替えるやり方はポピュラーなものの1つですが、通常そのやり方に適しているのは<a>～</a>のテキスト部分はtext-indentのマイナス値の定義等で実際には表示領域から追い出しておいて、閲覧者には「背景画像だけ（ナビゲーションボタンであれば上にのった文字まで含めて画像にしてある状態）」を見せる、という場合です。これであれば、<a>の包括する内容が画像という（閲覧者の環境に依存せず）表示領域を絶対値で固定できるものだけなので、位置がずれたりせずに画像を切り替えられる様な定義を与える事が可能なわけです。

しかし今回の場合は、テキスト部分は実際に表示させたいのですよね？であれば、<a>のステイタス毎に画像を分けて背景画像として定義する方法をお奨めします。
画像は、13×13（縦方向は適当でかまいません）で：
・img_a0.gif…静的状態（a:link, a:visited）で表示する背景
・img_a1.gif…a:hoverの際の背景
・img_a2.gif…a:activeの際の背景
という様な感じで切り分けて作成して下さい。
---------------------------------------------------------------------
【CSS】サンプル
---------------------------------------------------------------------
body {
font-size: 12px;
line-height: 140%;
}
※上記はお好みのものを適当に定義するか、あるいはなくても可です。

a.btn {
margin: 1px 0px 1px 13px;
background-repeat: repeat-y;
background-position: left top;
}
a.btn:link, a.btn:visited {
background-image: url("img_a0.gif");
}
a.btn:hover {
background-image: url("img_a1.gif");
}
a.btn:active {
background-image: url("img_a2.gif");
}
---------------------------------------------------------------------
これであれば、フォントの種類・サイズに依存せず（当然ですが）異なるステイタスの時の背景画像が表示されるという状態にはなりません。文字の大きさに合わせて垂直方向にどんどん描画領域が伸びていく、という状態になるので。ただし、これは各背景画像がリピートしてレンダリングされても構わないシームレスなパターンであるという前提です。また、背景画像のレンダリング開始位置ですが、IE7.0ではどうやってもテキストの内容に依存してしまい、サンプルの様に日本語のみのリンク（”テスト”）と半角英数字のみのリンク（”test”や”TEST”）を横並びにした時のこぼこは感は残ってしまう様です。FirefoxやOpera、あるいはIEでも6.0の方はvertical-alignとの併用できれいに揃えることできたのですが、7.0では今のところその点の解決策は見出せませんでした。

※あと1つ気になったのですが、各背景画像の水平方向レンダリング開始位置は、テキストと被っても構わないのでしょうか？オリジナルの画像サイズとリピートの定義から推測して、リストマーク的な扱いなのでは？と思ったものですから。もしそうであるなら、a.btnには更に"padding-left"を定義して少なくとも13px以上の値を与える事が必要となってきますが。現状のままでOKであれば無視して下さい（ちょっと不思議なスタイルだなと思っただけですので）。

お礼

返信ありがとうございます。また色々な説明を添えていただきありがとうございます。

---------------------------------------------------------------------
試しに、Firefox側で表示文字サイズを1,2段階上げてみて下さい。日本語も半角英数字も同様に下に本来a:hoverの時に表示されて欲しい画像領域が（上に繰り上がって）見えてしまいます。
---------------------------------------------------------------------
フォントサイズの変更にまで頭が行きませんでした。さっそくfirefoxで試してみたところ上にせりあがって表示されていました。

---------------------------------------------------------------------
リストマーク的な扱いなのでは？と思ったものですから。
---------------------------------------------------------------------
言葉足らずですみませんでした。左に画像が入ってテキストにマウスオーバーをかける際にテキストとリストマークがいっしょ色変化できたらいいなとトライしたのきっかけです。

---------------------------------------------------------------------
FirefoxやOpera、あるいはIEでも6.0の方はvertical-alignとの併用できれいに揃えることできたのですが、7.0では今のところその点の解決策は見出せませんでした。
---------------------------------------------------------------------
vertical-alignの情報がカギかなと思ってあれから色々探したりトライしてみたんですが・・・。

---------------------------------------------------------------------
FirefoxやOpera、あるいはIEでも6.0の方はvertical-alignとの併用できれいに揃えることできたのですが、7.0では今のところその点の解決策は見出せませんでした。
---------------------------------------------------------------------
色々情報を探ってきましたが、私のやり方に上記のとおり穴が結構おおくて再考が必要かもしれません。他の見せ方も視野に入れて考え直してみます。

abrilさんのおかけでフォントサイズが人それぞれ違うという視点があらたに得られたので非常にためになりました。あまり意識していなかったので。

これまで丁寧にお付き合いくださりありがとうございました。

回答No.2

abril

> いろいろある記述方法のひとつみたいです。動作もちゃんと確認していたのであまり気にも留めず
(省略）
> abrilのように記述してみましたがやはり同じでした。

そうですか。CSSとのお付き合いも長いですが、aに対するクラスと疑似クラスの記述でこの様な順番は初めて見ましたが…
本来は要素名（a）、ピリオド（ . ）、クラス名（btn）、コロン（ : ）、疑似クラス、といった順番の筈だったんですが。
http://www.tagindex.com/stylesheet/basic/format4.html
※気になったのでググって参考になるコンテンツを探してみましたが、どうも現在はどちらで記述しても主要ブラウザで同じ挙動を返してくる様だがいくつかのブラウザでは誤動作の可能性があるからなるべく本来の順番で記述するのが望ましい、という様なスレッドがありました。

本題から逸れまして失礼しました。それはさておき、

> 上記の記述だけでテストして確認しました。

ということであれば英語と日本語で異なる結果を返すとなるとやはりエンコーディングの問題でしょうか。
IEはエンコーディングの認識の際の不具合もちらほら見受けられる様なので、もう少し質問者様の実際の状況が詳しくわかれば条件を同じにして検証する事ができるかと思いますので、とりあえず下記について補足して頂けますか？

・HTMLのエンコーディングは何ですか？
・XHTMLですか？であればXML宣言あり（宣言中でエンコーディングも指定）／なし（metaタグでエンコーディング指定）、どちらでしょうか？
・CSSファイルの記述はこの3つだけで、他は一切定義していないでしょうか？フォント周りの定義もありませんか？

お礼

返信本当にありがとうございます。参考までに私が書いたのを以下に記述します。用意したファイルは style.css test.html img.gif(13*36)です。
GIFファイルについてはこちらで用意できないので申し訳ないですが、基本的に表示ズレの確認がとれればOKなのでなんでも大丈夫です。

【　style.css　】↓
a.btn{margin: 1px 0px 1px 13px;background: url("img.gif") no-repeat left top;}
a.btn:hover{background-position: left -13px;}
a.btn:active{background-position: left -26px;}

【　test.html　】↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>テスト</title>
</head>
<body>
<div class="btn">
<a href="index.html" >test</a>
<a href="index.html" >テスト</a>
</div>
</body>
</html>

/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
・HTMLのエンコーディングは何ですか？
・XHTMLですか？であればXML宣言あり（宣言中でエンコーディングも指定）／なし（metaタグでエンコーディング指定）、どちらでしょうか？
・CSSファイルの記述はこの3つだけで、他は一切定義していないでしょうか？フォント周りの定義もありませんか？
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
上記、記述がテストした全部です。abrilさんに必要な情報を提供できていればいいのですが。

フォント指定は上記のとおり何もやっていません。IEの設定はデフォルトのままなので、英語がClearType?というやつ、日本語がMS Pゴシック？だと思います。とにかくIEはデフォルトのままです。

補足

すいません<body></body>が違いました。
<a href="index.html" class="btn">test</a>
<a href="index.html" class="btn">テスト</a>

色々試していたうちのひとつを間違えてのせてしまいました。

回答No.1

abril

そもそも記述の仕方が間違っていますね。
<a href="index.html" class="btn">～</a>に適用したいのであれば、

a:hover.btn{background-position: left -13px;}
a:active.btn{background-position: left -26px;}

ではなく、

a.btn:hover{background-position: left -13px;}
a.btn:active{background-position: left -26px;}

でなければいけません。ですので、

> firefoxでは日本語英語ともに差異なく意図したとおりに表示してくれます。

こちらの方がむしろ不可解ですね。「英語と日本語で表示位置にズレが生じて」というレベルではなく、a:hover時もa:active時も無効になる様に思えますが…

とりあえず、記述方法を正しく修正してみて下さい（それで解決に至るかどうかは、先述の通り「今正しく表示されている」事自体が解せないので何とも言えませんが、とりあえず犯人宛をする為の絞り込みとして…）。それでも意図した通りにならないのであれば、提供された部分ではないところの定義に原因があると想定されますので。

お礼

返信ありがとうがざいます。

本当に初心者でCSSについて詳しいわけではありませんが、いろいろある記述方法のひとつみたいです。動作もちゃんと確認していたのであまり気にも留めず・・・、これはいけるかとabrilのように記述してみましたがやはり同じでした。それと他のCSSの影響はありません。上記の記述だけでテストして確認しました。

引き続きグーグルなんかで色々検索かけていますが、解決してません。