- ベストアンサー
imgを含むliの高さが大きくなるバグ？
お世話になります。 ＷｉｎＸＰｓｐ２＋ＩＥ６の環境のみで再現する事象です。 高さ２０ｐｘの画像（img/menu_home_w100h20.gif）を、上にマージンを１０ｐｘとって配置しています。 都合２０ｐｘ＋１０ｐｘで３０ｐｘの高さとなるはずですが、なぜか３４ｐｘあります。調べてみるとli要素がなぜか４ｐｘ下に膨らんでしまっているようです。 ちなみにＩＥ６以外のブラウザ（ＩＥ７、ＦｉｒｅＦｏｘ２、Ｏｐｅｒａ９．１）ではいずれも３０ｐｘとなります。 この事象を回避する手段がありましたらご教授いただければ幸いです。 下記は拙いソースです。見づらくてすいません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> *{ margin:0px; padding:0px; } html,body{ width:100%; height:100%; color:#663300; } .clear{ clear:both; } #box{ width:800px; height:30px; background-color:#FFFFCC; position:absolute; z-index:-1; } #menus{ display:block; height:20px; } #menus li{ float:left; display:block; margin-left:15px; height:20px; background-color:#66FFFF; list-style:none; } #menus li img{ margin-top:10px; } </style> </head> <body> <div id="box">あ</div> <ul id="menus"> <li><img src="img/menu_home_w100h20.gif" alt="ホーム" border="0" /></li> </ul> </body> </html>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE6だと画像の下に隙間が出来ますね。 回避策としては <li><img style="vertical-align:bottom" src="img/menu_home_w100h20.gif" alt="ホーム" border="0" /></li> でいかがでしょうか？ vertical-align:bottomで画像を下つきにすることで隙間がなくなるはずです。
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは img { display:block; } とすればなくなりました その際 li { width:20px; } か img { width:20px;height:20px; } が必要になります(Operaで li が元画像のwidth表示になってしまうため） ※画像表示が20*20で元画像が20*20以上の場合です 元画像を縮小表示しない場合はいりません あとこちらで確認したところz-index:-1;としていたらFirefoxでboxが表示されていないようだったのですがそちらでは出てます？ #box{ z-index:1; } #menus { position:absolute; z-index:2; } #dummy { height:***px; } <div id="dummy"></div> <div id="box">あ</div> 以下続く ※position:absolute;すると高さが取れないので#dummyでダミーheightの調整をします
お礼
ご回答ありがとうございます。 この手もあったのですね。大変参考になります。 ＞あとこちらで確認したところz-index:-1;としていたらFirefoxでboxが表示されていないようだったのですがそちらでは出てます？ FireFoxではboxが表示されませんね～。 ブラウザによっていろいろ違いますよね。
お礼
ご回答ありがとうございました。 ご教授いただいた内容で対処できました。助かりました！ ＃vertical-align:bottomは考えたのですが、li要素ではなくimg要素につけるべきだったんですね（汗