スタイルシート IE環境でのバグ

質問

下記アドレスが現在テスト中のサイトのアドレスです。

グローバルメニューボタン下部(添付画像の赤枠の部分)に2～3px程の白い隙間がどうしてもできてしまいます。
色々CSSの設定を試してみたのですがどうしてもWIN XP IE6の環境だけ回避できないのです
その他の一般的なモダンブラウザでは大丈夫なのですが・・・
どなたか原因を教えていただけると助かります。
宜しくお願いします。

■HTML
http://sangoclip.web.fc2.com/lesson01/
■デフォルトCSS
http://sangoclip.web.fc2.com/lesson01/shared/css/default.css
■リセットCSS
http://sangoclip.web.fc2.com/lesson01/shared/css/reset.css

回答No.1

vertical01 · ベストアンサー

#g-navi-container img.g-navi {
margin-right:1px;
vertical-align:bottom;
}

のように画像にvertical-align:bottomを指定してみてください。

お礼

早々のご回答ありがとうございます。
上記アドバイスいただきました方法で見事回避する事ができました。
ありがとうございます。
ただ多少気になる点があるのですが
なぜ「vertical-align」を「bottom」に設定する事によってこの現象が回避できるのでしょうか？
それがどうも納得できません。
出来ればその辺も含めご説明いただけると助かります。
まあーー
IEバグ回避のおまじないみたいな物なんでしょうかね

回答No.4

vertical01

No.1です。

IE6のみで生じると言ことで違う原因かもしれませんが、
<ul><li>画像</li><li>画像</li></ul>
のように、リスト部分のHTMLに改行をつけないと隙間ができませんので↓の「改行がある場合」と関係があるのでは？と思います。
http://nagomin0123.web.fc2.com/margin_padding_img/margin_padding_img_1.html

↓は対処法です。
http://nagomin0123.web.fc2.com/margin_padding_img/m_margin_padding_img_1.html

お礼

何度もありがとうございます。
対策方法もいろいろあるのですね
今後シチュエーションによって一番適切な方法を選んで使っていきたいと思います。
色々ありがとうございました。

回答No.3

noname#119957

UL li img ：中身が画像なのでheightを指定してもいけると思います。

お礼

参考サイト付きで
納得のいく理屈説明をいただきありがとうございます。
対策方法もいろいろあるのですね
今後シチュエーションによって一番適切な方法を選んで使っていきたいと思います。
色々ありがとうございました。

回答No.2

abril

横から失礼します。

> なぜ「vertical-align」を「bottom」に設定する事によってこの現象が回避できるのでしょうか？

IE6はvertical-alignの初期値が（Firefox等、他の主要モダン・ブラウザではbottomになっているのに対し）baselineになっている為、ですね。
そうすると何故画像の下に隙間ができるのかについては、下記の説明などが図解入りでわかりやすいかと思います。
【参考】http://shigexworks.sakura.ne.jp/image-bottom-space

…という理屈なので、この現象は、#g-navi-containerの指定の方で"line-height: 0"もしくは"overflow: hidden;"を追加する事などでも回避できます。
＃まあ前者はCSSとしてあまりよろしくない指定（中味があるのに行の高さ0というのは不自然だから）なのでお奨めはしませんが。

お礼

参考サイト付きで
納得のいく理屈説明をいただきありがとうございます。
対策方法もいろいろあるのですね
今後シチュエーションによって一番適切な方法を選んで使っていきたいと思います。
色々ありがとうございました。