ページに Google マップが含まれている場合に IE7 で CSS/JS ドロップダウンを修正する最良の方法

質問

を使用しているページがあります <ul> ナビゲーション用のリスト (JavaScript は、マウスオーバー時にスタイルを表示するかどうかを変更します)。

これは私にとってはうまく機能しています を除外する ページ上に Google マップがある場合、IE6 および IE7 で。

この場合、ドロップダウンは単に機能しません。ただし、このページは FireFox 2 でも引き続き機能します。

少し調査した結果、これは IE セレクトボックスのバグの一例である可能性があることがわかりましたが、Google マップでは <div>, ではありません <iframe>.

他にこれと同様の問題に遭遇した人はいますか?もしいる場合、この問題を克服する最善の方法について何か推奨事項はありますか?

解決

これで問題が解決するかどうかはわかりませんが、試してみるとよいでしょうこのソリューションは ccsplay.co.uk にありますこれにより、ドロップダウンリストの下にメニューが表示される問題が修正されます。確実に効果があるかどうかはわかりませんが、試してみる価値はあります。

他のヒント

これを使用して、IE6/IE7/IE8のFlashムービー上にドロップダウンが表示されない同様の問題を修正しました jQuery:

$(function () {
  $("#primary-nav").appendTo("#footer");
});

どこ primary-nav それは ID ドロップダウンコンテナ要素の、および footer それは ID ページの最後の要素の。次に、絶対配置を使用して、ドロップダウンをそれらが属している上部に再配置しました。

これが機能する理由は、IE がソースの順序付けを優先するためです。 z-index. 。ただし、それでも Windows Media Player プラグインの上に表示することはできませんでした。

これは、IE 6 以降が CSS の解析に使用する Active-X が原因で発生する可能性があると考えられます。

時間が経つにつれ、いくつかのブラウザーと互換性を持たせるために、CSS に IE ハックをいくつか組み込むように作業を調整する必要がありました。

まず、JavaScript を使用せず、純粋な CSS を使用し、前述したハックを含めてメニューを作成してみます。おそらく問題は解決するでしょう。実際には、マウスオーバーなどでスタイルを変更するために Javascript は必要ありません。

CSS ハッキングが何であるかを確認したい場合は、次のようにします。クリックここ

純粋な CSS メニューの例を確認したい場合は、次のようにします。クリックここ

お役に立てれば！

によるとこのグーグルマップのスレッド, 正解です。IFrame は Google コードによって挿入されます。

ダンが言及した解決策を使用する必要があります。

試してみてはいかがでしょうかこのソリューションは ccsplay.co.uk にありますこれにより、ドロップダウンリストの下にメニューが表示される問題が修正されます。

基本的な解決策は、JavaScript を使用して CSS メニューを IE6 の IFrame に配置することです。

別の解決策は、JavaScript を使用して CSS メニューがプルダウンされたときに Google マップを非表示にするか、CSS メニューがプルダウンされたときに Google マップを静的マップ (おそらく Google 静的マップ) に置き換えることです。

すぐには答えられませんが、次のツールで説明されています。この答え (特に IE DOM Inspector) が役に立つかもしれません。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow