更正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;
}

（宽度：420px \ 9;是IE9黑客）。

虽然这确实有效但我想知道为什么我必须在Chrome中指定单独的宽度时这没有问题，而且我没有在CSS的任何地方指定最大宽度。我讨厌承认它，但除非如上所述禁止使用黑客，这个问题让我失败了！我很确定我做错了什么或者我错过了一些微不足道的事情。无论哪种方式，我都希望能够深入到底并把它放在我身后。

Answer 1

不确定这是否有帮助，但您的宽度行为受<ul class="sub-menu sub-menu-1">的绝对定位影响。

主题还有更多内容：div with unspecified width (absolute positioning)，因此指定width或min-width即可。