お世話になります。ＷｉｎＸＰｓｐ２＋ＩＥ６の環境のみで再現する事象です。高さ２０ｐｘの画像（img/menu_home_w100h20.gif）を、上にマージンを１０ｐｘとって配置しています。都合２０ｐｘ＋１０ｐｘで３０ｐｘの高さとなるはずですが、なぜか３４ｐｘあります。調べてみるとli要素がなぜか４ｐｘ下に膨らんでしまっているようです。ちなみにＩＥ６以外のブラウザ（ＩＥ７、ＦｉｒｅＦｏｘ２、Ｏｐｅｒａ９．１）ではいずれも３０ｐｘとなります。この事象を回避する手段がありましたらご教授いただければ幸いです。下記は拙いソースです。見づらくてすいません。無題ドキュメント *{ 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; } あ

IE6だと画像の下に隙間が出来ますね。回避策としてはでいかがでしょうか？ vertical-align:bottomで画像を下つきにすることで隙間がなくなるはずです。

imgを含むliの高さが大きくなるバグ？

解決済

質問者：misshiki
質問日時：2008/02/03 15:35
回答数：2件

お世話になります。
ＷｉｎＸＰｓｐ２＋ＩＥ６の環境のみで再現する事象です。

高さ２０ｐｘの画像（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件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： armstrong-us
回答日時：2008/02/03 16:45

IE6だと画像の下に隙間が出来ますね。

回避策としては
<li><img style="vertical-align:bottom" src="img/menu_home_w100h20.gif" alt="ホーム" border="0" /></li>

でいかがでしょうか？
vertical-align:bottomで画像を下つきにすることで隙間がなくなるはずです。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
ご教授いただいた内容で対処できました。助かりました！

＃vertical-align:bottomは考えたのですが、li要素ではなくimg要素につけるべきだったんですね（汗

通報する

お礼日時：2008/02/03 20:05

No.2

回答者： leap_day
回答日時：2008/02/03 19:07

こんにちは

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の調整をします

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
この手もあったのですね。大変参考になります。

＞あとこちらで確認したところz-index:-1;としていたらFirefoxでboxが表示されていないようだったのですがそちらでは出てます？

FireFoxではboxが表示されませんね～。
ブラウザによっていろいろ違いますよね。

通報する

お礼日時：2008/02/03 20:03

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！