IEとFFで要素が正しくレンダリングされるようにCSSを修正しました。

Question

金曜日からこの問題を自分で解決しようとしていますが、運が悪いようです。うまくいけば、以下の詳細を参考にすれば、誰かが私を正しい方向に押し進めるのを助けることができます。

問題のサイトはhttp://www.jewelbyjewel.co.uk

問題領域である：トップナビゲーションメニュー

あなたはクロームのメニューを見れば、これは2番目のメニューが表示されますどのようにされています

​​ はこれがありますメニューはどのように見えるべきですか？ IEとFFで

、これはメニューが間違っていたどのように見えるかです：

今

、私は明示的に以下のスタイルシートで幅を指定することによってこの問題を解決することができ承知しています： http://jewelbyjewel.co.uk/wp-content/plugins/ubermenu/styles/custom.css これに

#megaMenu ul li#menu-item-225 { 
    position:relative !important; 
} 
#megaMenu ul li#menu-item-225 ul.sub-menu-1 { 
    max-width: none !important; 
} 

：私はこれを変更することができ

#megaMenu ul li#menu-item-225 { 
    position:relative !important; 
} 
#megaMenu ul li#menu-item-225 ul.sub-menu-1 { 
    max-width: none !important; 
    width:400px; 
    width: 420px\9; 
} 

（幅：420px \ 9; IE9のハックです）。

これはうまくいくが、なぜChromeで問題なく動作し、CSSのどこにでも最大幅が指定されていない場合、個々の幅を指定する必要があるのだろうかと思う。私はそれを認めることはできませんが、上記のハッキングを使用しないことを除いて、この問題は私を打つ！私は何か間違ったことをしたか、何かを忘れてしまったと確信しています。いずれにせよ、私はこれの底に到達して、それを私の後ろに置くことができるのが大好きです。

Answer 1

これが役立つかどうかはわかりませんが、幅の動作は<ul class="sub-menu sub-menu-1">の絶対配置の影響を受けます。

件名はdiv with unspecified width (absolute positioning)なので、widthまたはmin-widthを指定するといいです。