css - 更正 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 hack)。

虽然这确实有效，但我想知道为什么我必须指定单独的宽度，而在 Chrome 中这没有问题，而且我没有在 CSS 中的任何地方指定最大宽度。我不想承认这一点，但除非使用上面详述的 hack，否则这个问题让我失望了!我很确定我做错了什么或者我错过了一些微不足道的事情。无论哪种方式，我都希望能够查明这件事并将其抛在脑后。

Answer 1

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

关于这个主题还有更多内容:div with unspecified width (absolute positioning) , 所以指定 width或 min-width是要走的路。