html - IE でドロップダウンの配置を修正する

Question

私は現在、いくつかのクライアント作業に取り組んでおり、作成したシンプルなドロップダウン メニューを利用しています。IE を除くほとんどのブラウザで問題なく動作するようです。IE は実際には多くの洞察を提供しておらず、正確な問題を突き止めることができなかったため、デバッグは本当に苦痛でした。

position: absoluteドロップダウンは、 3 つの を含むdiv です<ul>。私が知る限り、div は問題なく配置されていますが、最初の ul は本来あるべき幅の 2 倍であり、明確な理由がないため、ドロップダウン全体が適切に配置されていないように見えます。

ドロップダウンは次の場所にあります: fatumdemo.platonlearning.com。トップ メニュー (青色) のメニュー項目を移動すると、問題が表示されます。

コードは非常に長く、ここに投稿することはできませんが、構造と CSS に関する詳細情報が必要な場合に備えて、喜んで投稿します。

Answer 1

ジョーイ

1) #navigation ul li ---> position:relative プロパティを追加するには

2) #navigation ul li .dropdown -----> width:450px から 500px を入れます

3) #navigation ul li .dropdown ul -----> width:160px 以上を入力します。

主な問題の理由は幅と相対です。絶対位置を追加すると、相対位置は親要素でなければならず、幅と高さは絶対要素でなければなりません

Answer 2

問題は、 以外liの要素を の子として使用していたことにありましたul。Internet Explorer は、他のすべてのブラウザーとは異なり、この動作を容認しないようで、他の要素をリスト項目として扱うため、ドロップダウンが IE の間違ったリスト項目に配置されます。