CSSテクニックコミュのWin版ＩＥのみposition:absolute以下が表示されない

いつも皆様のトピで勉強させて頂き、有難うございます。
どうにもこうにも詰まってしまったので、ご教授を宜しくお願いします。

現在、CSS＋Javascriptでプルダウンメニューを作成しているのですが、

http://www.kanoe.seventh-heaven.org.uk/sample/index.html

作成環境のMacでSafari・Firefox・ＩＥと全てうまく表示されたので、Win環境での検証に入った処、ＩＥ（WindowsXP／ＩＥ6.0）だけプルダウンのサブナビゲーションが表示されないどころか、デフォルトでもその下に配置したline画像も表示されないことに気づきました。
Javascript・CSS共々デバッガにかけてみても、致命的なエラーは見あたらず……ものは試しと、プルダウンを行うJavascriptを外し、.submenuの「visibility : hidden;」も外して検証してみたのですが、この段階で既に.submenu領域がＩＥだけ表示されないことが分かりました。
他のブラウザでは問題なく表示できている分、ＩＥ特有の問題だと思い、バグリスト等々を当たってみたのですが、該当案件が見あたらず、途方に暮れています。

お手数をおかけしますが、上記URLのソースで何かお気づきの点があれば、ご教授頂けませんでしょうか……。
宜しくお願い致します。

コメント(7)

最初
全て
最新の40件

[1] mixiユーザー 08月27日 02:23

う～ん。。。
辛口の意見になりますが、
プルダウンが表示できるできない以前に、
HTMLの構造自体に問題があると思います。

かのかの＠庚さんのサイトを書き直すとすれば、
・
・
・
・
<UL id="mainnavi">
<LI id="home"><A href="index.html">HOME</A></LI>
<LI id="a">
<A href="#" onmouseover="showA()" onmouseout="shutA()">Ａ</A>
<UL id="a-sub" class="submenu" nmouseover="showA()" onmouseout="shutA()">
<LI><A href="#">a-1</A></LI> <LI><A href="#">a-2</A></LI> <LI><A href="#">a-3</A></LI> <LI><A href="#">a-4</A></LI> <LI><A href="#">a-5</A></LI>
</UL>
</LI>

<LI id="b">
<A href="#" onmouseover="showB()" onmouseout="shutB()">Ｂ</A>
<UL id="b-sub" class="submenu" onmouseover="showB()" onmouseout="shutB()">
<LI><A href="#">b-1</A></LI> <LI><A href="#">b-2</A></LI> <LI><A href="#">b-3</A></LI> <LI><A href="#">b-4</A></LI>
</UL>
</LI>
・
・
・
・
コピペしてやったので、細かい部分まで見ていませんが、
こんな感じの構造がベストかと思います。

自分が現在作成中のブログにプルダウンメニューを採用しているので、ソースコードを参考にしてみてください。

http://ks-product.com/blog/

[2] mixiユーザー 08月27日 02:28

あれ、改行されてない。。（汗
見づらいですね＾＾；

み易く整形してみてください。

[3] mixiユーザー 08月27日 02:44

こんばんは。
こういうときは、シンプルな形に戻して検証すると、何が悪さしているかわかりやすいですよ。(^^)b

CSSを外して見ると、最初だけ、サブメニューが表示されちゃいますけど、Windows環境のIE6でもFireFox1.7でも同じようにJavaScriptが実行されます。なので、ここはJavaScriptよりもCSSを疑ってみました。

色々とCSS外していくと、#headnaviの適用を外すと、座標はずれますが、WindowsのIE6環境で、サブメニューのリストが表示されました。

#headnaviのスタイルルールの、positionプロパティの値を、relativeから、absoluteにすると、一応動作しています。
なぜ、WindowsIE6で、relativeの座標の指定が悪さするかは、わかりませんが、このあたりブラウザの解釈が違うのかもしれませんね。(^^;)

[4] mixiユーザー 08月27日 03:34

とりあえずの報告ですが。

#headnavi ul#mainnavi{
list-style: none;
}

ここを以下のように書き換えたら正常に動作しました。

#headnavi ul#mainnavi{
height: 30px;
list-style: none;
}

はて、原因は何だろう……？

追記です。
クラス名、ID 名に「-」「_」を使用すると、余りよろしくない影響が出る場合があるそうです。
今回の現象がそこに引っかかるかどうかは判りませんが。

なので、出来れば、「a-sub」などの id 名から「-」を除かれた方がよろしいかもしれませんね。

[6] mixiユーザー 08月27日 12:05

皆様、どうも有難うございました。
拳骨斎さまの仰る通り、#headnavi ul#mainnaviにheight:30pxを指定してやることで、無事Win版ＩＥでも表示されるようになりました。
理由としては、invisibleさまが言及されている、
「divなどのコンテナ部分にheightを指定しないときちんと認識しないバグがある」
ということで、今後肝に銘じたいと思います。

☆kakeruさま
ご指摘、有難うございました。
確かに構造上ではkakeruさまに例示して頂いたかたちで記載するのが良いことは分かっていたのですが、#mainnaviと.submenuのwidthが異なることで表示崩れが起きてしまったことと、本チャンでは#mainnavi部分を画像置換で処理しており、li liのフォローがなかなかうまくいかなかったこともあって、このような構造にしてしまいました。
ただ、「あまり宜しくない」のは勿論ですので、その状況でもうまく表示できるよう、本アップまでには調整するつもりでいます。

☆コマツさま。
検証、有難うございました。
私も昨夜の時点で、javascriptを外しても不具合が起きるということは、確実CSSの問題だよな……と思って色々やってみたのですが、コマツさまがご指摘下さった#headnavi周りの調整は試しておりませんでした。
そして先程やってみて、「あ、ホントだ」。
ＩＥとpositionの解釈、今少し余裕ができたらチェックしてみます。

☆拳骨斎さま。
本当に、本当に、感謝申し上げます。
class名・id名の「-」「_」については、ＮＮのver.4.Xで誤認識を起こすという話を聞いていて、当時はあまり使わないようにしていたのですが、最近は流石に4.Xを使っているユーザも少ないだろうし、使っていたとしてもCSS関連全滅なのを承知の上でのコトだろうから……と（特にline-height！）、ガシガシ使っておりました^^;
できるだけ使わないよう、気をつけます。

☆invisibleさま。
本当に有難うございました。
拳骨斎さまにご指摘頂いて、ある意味「一件落着」だったのですが、invisibleさまのお話でその理由が分かり、かなりすっきりしました。

[7] mixiユーザー 08月27日 14:15

あ、そうそう。
floatを使う時は、その要素とその親要素に
widthを指定しないと、IEらへんで正しく表示されないことがあるので、その辺の対策も大事ですね。

ログインすると、みんなのコメントがもっと見れるよ