糾正CSS讓一個元素在IE和FF中正確渲染

Question

自從週五以來，我一直試圖自己解決這個問題，我似乎沒有任何運氣。希望以下具體內容，這裏的某個人可以幫助我朝正確的方向前進。

有問題的網站是http://www.jewelbyjewel.co.uk

問題區域：頂部導航菜單

如果你看一下在Chrome菜單，這是怎麼出現的第二個菜單：

​​ 這是菜單應該如何看。

在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; 
} 

（width：420px \ 9;是一個IE9黑客）。

雖然這樣做的工作，我想知道爲什麼我不得不指定個人寬度，當在Chrome瀏覽器中工作沒有問題，我沒有指定在CSS中任何地方的最大寬度。我討厭承認它，但如上面詳細說明的那樣禁止使用黑客，這個問題讓我失望了！我很確定我做了一些錯誤的事情，或者我錯過了一些微不足道的事情。無論哪種方式，我都希望能夠深入到底，並把它放在我身後。

Answer 1

不確定這是否有幫助，但是您的寬度行爲會受到<ul class="sub-menu sub-menu-1">絕對位置的影響。

關於這個問題還有一點：div with unspecified width (absolute positioning)，所以指定width或min-width是要走的路。