Chrome　だと、画像が少し下にずれてしまう

Question

こんにちは！

CSS初心者で、今回初めてＣＳＳを利用してホームページを作っています。
制作中に、行き詰ってしまい質問をさせていただきました。

メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています（ナビは、リストをfloatで横並びに表示しています）。

ＩＥだと、問題なく正しい位置で表示されるのですが、ＦｉｒｅｆｏｘやＣhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。

元凶を、探してみたんですが、なかなか見つけられません。
わかる方がいらっしゃったら、教えていただけないでしょうか。

お粗末なＣＳＳコードですが（多分、無駄なコードがいっぱいありそう・・・）
のせさせていたたきました。

よろしくお願いします。

CSS
--------------------------------------------------------------

@import url(base.css);
body{
text-align:center;
margin-right : auto;margin-left : auto;
background-image : url(images/bg_brown.png);
background-repeat: repeat;
font-size : 90%;
padding-top : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-bottom : 0px;
height : 100%;
}
#wrap{
text-align : center;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : auto;
width : 100%;
padding-top : 0px;
}
#com_back{
background-image : url(images/bg_green.png);
background-repeat : repeat-x;
}
#g_navi_back{
width : 100%;
height : 80px;
text-align : center;
background-repeat : repeat;
background-image : url(images/bg_g_navi.png);
}
#g_navi{
overflow : hidden;
width : 900px;
margin 0 auto;
margin-left : auto;
margin-right : auto;
background-repeat : no-repeat;
background-image : url(images/navi_base.png);
height : 80px;
}
#g_navi ul{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
}
#g_navi li{
text-align : center;
width : 180px;
float : left;
border-collapse : collapse;
background-position : left center;
top : 50%;
bottom : 50%;
letter-spacing : 1px;
line-height : 18px;
}
#g_navi li a{
display : block;
padding-top : 20px;
}
#g_navi ul li a:link{
text-decoration : none;
color : black;
}
#g_navi ul li a:hover{
background-image : url(images/navi_hover_g.png);
background-repeat : no-repeat;
background-position : center center;
height : 80px;
}
.inner{
text-align : left;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
width : 900px;
background-repeat : repeat;
height : auto;
background-image : url(images/bg_white.png);
}

html
------------------------------------------------------------------------------

<div id="wrap">

<div id="com_back"><div id="com" ></div></div>


<div id="g_navi_back">
<div id="g_navi">
<UL style="list-style-type : none">
<LI><a href="index.html">ホーム</a></li>
<LI><a href="**********">ご案内</a></li>
<LI><a href="**********">ご利用方法</a></li>
<LI><a href="**********">イベント詳細</a></li>
<LI><a href="**********">アクセス</a></li>
</UL></div>
</div>
<div class="clear"><hr /></div>

<div class="inner">

ORUKA1951 · Accepted Answer

そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。すみません。 IEでのみ表示が違う原因で、最も多いのは互換モードでの動作です。--IEの解釈が間違っている-- HTMLを標準モードで起動するように書き換えてください。・・・詳しくは、 DOCTYPE スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.1480.11553.1.12817.18.15.2.0.0.0.682.3732.0j10j1j1j1j2.15.0...0.0.TUp2L8opvrs&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=d0414a132c82753&biw=1024&bih=619 ) 　など　HTML5を目前とした今は、transitinalは過去の技術です。1999年のHTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」といわれ続けてきたことですから。　HTMLを Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　などでチェックしながら、ウェブ標準にまず直してください。　それでスタイルシートを記述すれば、どのブラウザでも標準モードで起動し、ブラウザによる差は消えるでしょう。　なお、スタイルシートはHTMLが文書構造だけ記述してあれば、もっとシンプルに簡単になるし、わかりやすくなります。　昨日回答した (CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7464353.html ) 　なんて、HTMLは極めて簡単で、スタイルシートもわかりやすいかと。　たぶん、あなたの期待されていることをHTMLさえ正しければ・・・HTMLは半分、スタイルシートは1/10で済むと思います。 ★継承されるプロパティは、一度しか書かない ★同じ設定をする要素はグループ化する。 ★デザインのためにidやclassは書かない　これだけで、随分とスリムになりメンテナンスも容易になります。「例」　(CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7464353.html ) 　具体的には、HTMLは

　だけでよいのです。

naokita · Answer

＞ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや ＞Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。
間違っているのはIEだね・・・（IEのバージョンにもよる）

＞多分、無駄なコードがいっぱいありそう・・・）
ですね・・・　半分以下に簡素化できますよ。

まずは、#1さんの通りDTD標準準拠に変更

作り直した方が後々の問題を回避できるけど、
とりあえずの応急処置なら、

#g_navi li a{
padding-top : 20px;

#g_navi ul li a:hover{
height : 80px;

実際の画像サイズが不明なので、良くわからないが、
この部分の高さが矛盾なのでは？
計算上では、21px程度のズレかな・・・
何故、a:hoverの時だけ　height : 80px;　なのかな？？？

Chrome だと、画像が少し下にずれてしまう

そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。

＞ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや ＞Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。

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

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

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

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

Chrome　だと、画像が少し下にずれてしまう

＞ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや＞Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。