CSSのロールオーバーがIEで崩れます

質問

CSSのロールオーバーでメニューを制作しています。
背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。
Mac+Safari、Firefoxではきちんと表示されるのですが、
Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。
（IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。）
しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。
ロールオーバー自体でなく、他の部分がおかしいのでしょうか？
ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。
タイトル画像が120x26で、その横に絶対配置で並べています。
ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、
問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。
（メニュー項目の数等一部省略しているところがあります。）
よろしくお願い致します。

/*CSSの記述*/
body{
margin: 0px;
text-align: center;
}

table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea {
line-height; 140%;
color: #696969;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 10pt;
}

div#wrapper{
width: 500px;
margin: 40px auto;
text-align: left;
}

div#header{
width: 100%;
position: relative;
margin-bottom: 30px;
}
ul#menu{
position: absolute;
left: 150px;
top: 10px;
width: 350px;
height: 10px;
}
ul#menu li{
float: left;
height: 10px;
margin-right: 15px;
}
ul#menu li a{
margin: 0;
padding: 0;
height: 10px;
display: block;
text-indent: -9999px;
outline: none;
background-repeat: no-repeat;
}
ul#menu li a:link,
ul#menu li a:visited{
background-position: left top;
}
ul#menu li a:hover,
ul#menu li a:active{
background-position: left bottom;
}
ul#menu li#top a{
background-image: url(../img/top.gif);
width: 32px;
}
ul#menu li#about a{
background-image: url(../img/about.gif);
width: 48px;
}
ul#menu li#pict a{
background-image: url(../img/pict.gif);
width: 37px;
}

/*HTMLの記述*/
<div id="wrapper">
<div id="header">
<h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1>
<ul id="menu">
<li id="top"><a href="top.html">top</a></li>
<li id="about"><a href="about.html">about</a></li>
<li id="pict"><a href="pict.html">pict</a></li>
</ul>
</div>
　～略～
</div>

回答No.2

abril · ベストアンサー

サンプル文書で検証してみました。
もし、「line-height: 140%;という一行を削除」しないままだと、ul#menu li aに"overflow: hidden;"を追加しただけではご希望通りの結果は得られない様です。ANo.1様のご指摘の通り、font-sizeやline-heightの影響でliの高さとして想定している10pxよりも実際のレンダリング領域が広がっています。
ul#menu liに"line-height: 0;"や"font-size: 0;"を指定しないで（本件は実際にはテキストが組み込まれているので背景画像が表示されない時の事を考慮します）おくなら、"overflow: hidden;"に加え、各background-positionの指定方法を絶対値に変えると上手く行く様です。

ul#menu li a{
（省略）
overflow: hidden;←追加
}
ul#menu li a:link,
ul#menu li a:visited{
background-position: 0px 0px;←変更
}
ul#menu li a:hover,
ul#menu li a:active{
background-position: 0px -10px;←変更
}

IE6/7、Firefox2/3、Safari3、Opera9.61、Google Chromeでの表示結果ではいずれも問題ありませんでした。

ちなみに、CSS中には記述が省略されていた様ですが、ulは予め"list-style: none; margin: 0; padding: 0;"でリストスタイルや余白がリセットされているのですよね？じゃないと今回の問題以外のレイアウトの崩れが起きる筈なので。

お礼

回答ありがとうございました。
No.1の方の回答にあったoverflow: hidden;の追加にあわせ、背景のポジションを絶対値で指定した所うまくいきました。
text-indent: -9999px;にしているものの、テキストが組み込まれていたため、line-heightとfont-sizeを0にしてしまうのは避けたかったのでとても助かりました。
詳しい記述までどうもありがとうございます。

それから表示結果までチェックしてくださったようで、本当にありがとうございます。
気になっていたIE6でもちゃんと表示されているようで安心しました！

"list-style: none; margin: 0; padding: 0;"については記述しています。
投稿用に整理する段階で削除してしまっていたようです。すみません。

いくら調べてみてもわからずすごく困っていたので本当に助かりました。どうもありがとうございました！

回答No.1

grumpy_the_dwarf

IEのバグの一つに、「中身がでっかいと勝手にボックスのサイズを
拡張する」ってのがあります。また、overflow属性の初期値は
visibleなので、ボックスからはみ出した画像が見えてもいいっての
もあります。

今回はおそらく、高さ10pxのボックスにサイズ10ptのテキストを詰
め込んでline-heightを140%にしているので、IEのバグによりボック
スが広がっていると思います。Windowsの10ptは13pxですし、その
140%なら行の高さは18pxありますね。line-heightを変えると見え方
が変わるってんならほぼビンゴだと思います。

ul#menu li a に、overflow: hiddenを追加してみて下さい。

お礼

回答ありがとうございました。
overflow: hiddenを追加し、No.2の方の回答を参考に背景のポジションを絶対値で指定した所うまくいきました。

>Windowsの10ptは13pxですし、その140%なら行の高さは18pxありますね。
な、なるほどー！すごく納得しました！
背景画像が全部表示されてしまうのならまだわかるのですが、ジャスト20px分見えるわけではなかったので、
なんでこんな中途半端に表示されるんだろうと謎だったのです。
なおかつ140%の指定を消しても10pxよりちょっと多く表示されたのは、
fontが10ptに指定されていたからだったのですね。
とても勉強になりました。本当にありがとうございました。