なぜ？マウスオーバーで1pt位置がずれる

Question

こんにちは。
CSSでマウスオーバーの指定をしたのですが、WindowsのIE6だけがマウスオーバー時に1ptだけ上に上がってしまします。
（Mac.Winのfirefox,safariは問題ありませんでした。）

マウスオーバーの指定は
/* サイドナビ---------------- */
#contents #sidenavi li#title {
background: url(images/btm_c_home.gif) no-repeat right;
padding: 0px;
}
/* サイドナビ---------------- */
に対して
/*サイドナビボタンロールオーバー*/
#contents #sidenavi li#chome a:hover{
background: url(images/btm_c_home_ov.gif) no-repeat right;
}
/*サイドナビボタンロールオーバー*/
というようにa:hoverで指定しています。
透過gifでメニューボタンを作っているので、バックにマウスオーバー時には通常のボタン画像が見えてしまってかっこわるいです。
オーバー時に動かないようにしたいのですがどうしたら良いでしょうか？

abril · Accepted Answer

※ANo.3への補足を元に回答しますが、長くなりますので投稿を分けて行きます。【回答1】 > 問題の箇所をアップしますので見て頂けるでしょうか？ > http://www.dtwash.com/test/001.html ここから、HTMLファイル、CSSファイル、必要な画像のみ取り出して、こちらの環境で再構成してみました。その状態だと、確かに当方のIE6上でも質問者様と同じ現象が起こります。前回はこちらで画像も作成し更に最小限の条件のみを抜き出して実験したので、結果として条件が完全に同じになってはいなかったのですね。従って、 > 「私のIEの設定が何かおかしい？」と思ってしまいます。 > 私のIEだけおかしい可能性ってあるのでしょうか？そうではない様ですのでひとまずご安心下さい。実験条件を以下とした上で改めて検証してみました。色々突っ込みどころはありましたが、それはまた後ほど。【HTML】 ---------------------------------------------------------------------- 東西新風堂施工カタログサイト【新着カタログ】

＃＃＃メイン＃＃＃

---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body {（略）} #wrapper {（略）} a:link {（略）} a:visited {（略）} a:hover {（略）} a:active {（略）} #contents {（略）} #contents #main {（略）} #contents #sidenavi {（略）} #contents #sidenavi ul {（略）} #contents #sidenavi ul li {（略）} #contents #sidenavi li a {（略）} /* サイドナビ---------------- */ （略） /*サイドナビボタンロールオーバー*/ （略） #contents #sidenavi em {（略）} ---------------------------------------------------------------------- 【画像】 #sidenaviのロールオーバーで使用しているオリジナルのon/off画像全て →【回答2】へ続く

abril · Answer

すみません、【回答2】(5)にコピペミスがありました。

（誤）【#contents #sidenavi li #title a】～【#contents #sidenavi li #rec a】
（正）【#contents #sidenavi li#title a】～【#contents #sidenavi li#rec a】

訂正させて頂きます。

abril · Answer

【回答3】
これは、ANo.4への補足の、

> お察しのとおりですが、具体的にはどうすれば良いのでしょうか？
> お手すきの際にでも教えて頂ければ嬉しいです。

に対するレスです。

【回答2】で挙げた、総括的なものを含めた問題点をご自分で理解し、改良して見て下さい。提供された素材をぱっと見た感じでは、CSSの「継承」「親子関係」という基本中の基本の概念や、float、height、paddingあたりの、レイアウトに重要な影響を及ぼすプロパティに対する理解が少々不足している様ですので。

では頑張って精進なさって下さい。本件の回答は、問題点も解決しています（少なくともご本人から提供された素材での検証はこれでクリアになっています）ので、これで打ち止めとさせて頂きます。

abril · Answer

【回答2】 CSSの問題点を挙げて行きます。本件の問題解決とは直接絡まない部分もありますが、ANo.4への補足への参考も含める意味で。全体的に指定の順番があまりよろしくないですね。原則、【親要素】→【子要素】の順番でないと、混乱しますしうっかり矛盾した指定をしてしまって不具合が出る元にもなります。body、から始まって主要タグへの初期値設定、各コンテナブロックを親子関係の順に下って行く、といった感じの方が間違いがないと思いますよ。それから、一括できる指定はなるべく一括で。親要素から既に継承されている値は子要素では省略を。Cascading、なのですからそれをフルに活かさなければ。以下が各スタイルへの修正・追加点です。 (1)【#contents】 #wrapperの中に#header／#footer／#contentsで、#contentsの中が2コラムで左に#sidenavi／右に#main、というANo.4の投稿でコメントした通りの構成ならば、#contentsがfloatしているのはおかしいですね。事実、そのせいで子要素の#sidenavi／#mainの高さが計算できずにはみ出してしまっている為、背景も途中でレンダリングが切れます（#contentsに背景色を追加して見ると一目瞭然です）。・float: left;を削除更に、この状態を解消するには、CSS側で【#contents】の設定に通称"clearfix"というtips（ググれば山の様に出てきますので理屈と方法はご自分で学んでください）を加えるか、HTML側で【#contents】のブロックが閉じる直前に"clear: both;"のスタイルを持った

（【回答1】のHTMLコードの

の閉じタグの直前を参照）を追加するなどして、【#contents】が子要素のコンテナブロックの適切な「終わり」を認識できる様にしてやる必要があります。 (2)【#contents #sidenavi】子要素のメニュー（

～

）1つ1つのheightがオリジナルの指定では17pxと指定されており、それが8つあるのに、親要素のheightが17pxでは矛盾しています。少なくとも17px×8以上のheightが必要なのですから。そもそもこの場合、メニューのブロックの高さは成り行きでかまわないのですから、heightの指定は不要です。・height: 17px;を削除 (3)【#contents #sidenavi ul】※これはなくてもよし（理由は本文参照）このメニューにはテキスト・データは入らず画像のみということの様ですので、中の

どうしを隙間なく並べたいのであれば、line-heightを初期化しておいた方がよいかも（厳密なCSSチェックでは跳ねられてしまう（そりゃそうだ）ので「おすすめ」してはいけないのですが、これが0になっていないと諸条件が重なると微妙な隙間ができる事があります）。・line-height: 0;を追加 ※しかしこのメニューは透過画像ですし、実際に提供された素材でレイアウトしてみた限りでは上下に数pxの隙間の差があったとしてもレイアウトの大局には支障ない様に思われます。それであればこの(3)の処理は不要です。 (4)【#contents #sidenavi ul li】※新規追加ついでに子要素の

も一括指定しておきましょう。【#contents #sidenavi ul】の指定の次に、 #contents #sidenavi ul li { margin: 0; padding: 0; } を追加して初期化を。 (5)【#contents #sidenavi li a】中のメニュー画像の高さが一定ではない（23pxのものと11pxの2種類）ので、heightやpaddingの指定にも矛盾が出ています。このメニューはテキスト・データは入らず画像のみということの様ですから、heightの値が固定値となるので大きい方のheightを指定し、paddingを外し、垂直方向（下）に適度な余白をmarginで与えてみれば良いでしょう。 ※heightと垂直方向のpaddingが同居している場合、環境によってそのpadding値をheight値の中に含めるか含めないかという解釈の差が出てきますので、注意が必要です。・height: 17px;→height: 23px;へ・margin: 0;→margin-bottom: 5px; ・padding: 10px 0px 5px;を削除 (5)【#contents #sidenavi li#title】～【#contents #sidenavi li#rec】ここに原因がある様です。不具合に直接関係はありませんが、まず、(4)で共通要素を一括指定してあるので、各idへの個別padding指定は不要となります。・paadingを削除で。ここは実は最初のやりとりで提供されたものを見た時からちょっと奇妙な感じがしたのですが、a:hoverで画像をロールオーバーさせるのであれば、マウスアウト（初期）状態のスタイルは、各

ではなく、各に対して指定するのが通常の考え方だと思います。なので、各idのスタイルは、

の子要素のに対してつけて下さい。つまり、/*サイドナビボタンロールオーバー*/とコメントしてあるa:hoverの各id指定と対にする、ということです。【#contents #sidenavi li#title】～【#contents #sidenavi li#rec】 ↓ 【#contents #sidenavi li #title a】～【#contents #sidenavi li #rec a】という様に、を追加してみてください。少なくとも当方で確認する限り、これでズレはなくなりました。 (6)【#contents #sidenavi em】※これはおまけです。本件の問題とは直接関係ありません。 visibility: hidden;だと、クライアント側でフォントサイズを大きくして入った場合に、高さがどんどん増えていきます。ここのテキストはスタイルが有効な場合は「見えなくて」良いわけですから、・visibility: hidden;→display: none;へ ※ただしこれは今回の様に、【#contents #sidenavi li】もしくは【#contents #sidenavi li a】にheightが固定値で指定されている場合のみ有効です。でないと「要素」が存在しない状態では「高さ」も存在しなくなってしまうので（backgroundはそれ自体の高さを指定できませんから）。 →【回答3】へ続く

abril · Answer

これは質問者様の問題にされている事とはちょっと方向性がずれているかもしれないので参考までに。

このメニュー、idの内容と名前から想像して、もしかして
----------------------------------------
ヘッダー
----------------------------------------
□□□□□□□■■■■■■■■■■■■■
□メニュー1　　□■
□メニュー2　　□■メイン
□メニュー3　　□■
□□□□□□□■■■■■■■■■■■■■
----------------------------------------
フッター
----------------------------------------
（上記はテキストとスペースでの表示の為グリッドがずれますが大体のイメージはおわかり頂けるかと）という様なレイアウトで、メニュー1～メニュー3はそれぞれ垂直方向に隙間なくぴったりくっつけて並ぶ、という感じでしょうか？

もしもそうであれば、現状の#sidenaviやその子要素のスタイル設定にはちょっと問題があります。heightやpaddingの指定の仕方等で環境による表示結果の差も出ますのでご注意下さい。

あくまでこれは蛇足ですので、やりたい事が違うのであれば、無視して下さい。

abril · Answer

> 下記のように設定しておりますが、この箇所を削除してみても結果は変わりませんでした。 > a:link { （省略） > } そうですね、↑にはフォント周りのスタイルだけで別にpaddingやline-height等が指定されておりませんので、無関係の様です。ところで、 > #contents #sidenavi li#title { > background: url(images/btm_c_home.gif) no-repeat right; > padding: 0px; > } とあるのは、 > #contents #sidenavi li#chome { （略） > } のコピペミスですよね？そう解釈した上で、試させて頂きました。一通り提供されたソースのみ貼り付けたCSSを作り： ※記述順番は以下の様にしました。理屈からはこう並ぶのが妥当想定されましたので。 --------------------------------------------------------------------- a:link {（省略）} a:visited {（省略）} a:hover {（省略）} a:active {（省略）} #contents #sidenavi {（省略）} #contents #sidenavi ul {（省略）} #contents #sidenavi li a {（省略）} #contents #sidenavi li#chome {（省略）} #contents #sidenavi li#chome a:hover{（省略）} --------------------------------------------------------------------- btm_c_home.gifとbtm_c_home_ov.gifをそれぞれW150px×H17pxでダミー画像を作り： HTML側を下記の様にコーディングして表示結果を確認してみました。 ---------------------------------------------------------------------

メニュー1

--------------------------------------------------------------------- ※ちなみに、DOCTYPE宣言はとしています。この限りでは、IE6でもFirefox（2.0.0.12）でも、当方の表示結果に全く違いはありませんでした。質問者様の仰る様な1ptのずれ、も起こりません。念の為Opera、NNの適当なヴァージョンでも試して見ましたが同様です（OSはWindows XP）。原因は提供された以外の、他の箇所にあるのでは…CSSを一度空にして、一つづつスタイルを復活させて行き、おかしな挙動が出たらその時点で追加したスタイルに、犯人を探す手掛かりを見つけられる可能性があります。蛇足ですが、 > IEは他のブラウザよりもシビアな感じを受けるのでむしろこれは逆で、IEの解釈の緩さや（間違った方向での）独自解釈は、CSS使いの間では悪名高いです…。

goldfox · Answer

IE限定というと、doctype宣言で標準モードを選ぶと、ずれがなくなるとか？

http://www.redout.net/data/dtdmode.html

abril · Answer

これだけでは判断素材が少なすぎるので断言はできませんが、スライス時のon/off画像のグリッドが微妙に違っていたりはしませんよね？
※まあそうであれば他の環境でもずれると思いますのでその可能性は少ないでしょうが。

あとは、

> #contents #sidenavi li#chome a:hover{
> background: url(images/btm_c_home_ov.gif) no-repeat right;
> }

この箇所に対する、a:hover以外の疑似クラス、a:link、a:visited、a:activeはどの様に指定されていますか？

なぜ？マウスオーバーで1pt位置がずれる

※ANo.3への補足を元に回答しますが、長くなりますので投稿を分けて行きます。

すみません、【回答2】(5)にコピペミスがありました。

【回答3】

【回答2】

これは質問者様の問題にされている事とはちょっと方向性がずれているかもしれないので参考までに。

この回答への補足

> 下記のように設定しておりますが、この箇所を削除してみても結果は変わりませんでした。

この回答への補足

IE限定というと、doctype宣言で標準モードを選ぶと、ずれがなくなるとか？

この回答への補足

これだけでは判断素材が少なすぎるので断言はできませんが、スライス時のon/off画像のグリッドが微妙に違っていたりはしませんよね？

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング