网站菜单在 IE8 中显示不正确

Question

这是我的网站：http://b.countylinemini.com/。 IE 8 及以下版本的菜单乱七八糟。似乎无法修复它。我在 shiv 上安装了 modernizr。我尝试通过将整个菜单包含在 div 中来应用样式来修改 css。

感谢任何帮助

Answer 1

这里的问题在CSS。

一个快速修复方法是为 IE8 及更低版本添加特定的 CSS。 http://www.quirksmode.org/css/condcom.html

菜单无序列表的样式为 "display:table"，列表项的样式为 "display:table-cell"，我认为这是旧版 IE 浏览器的问题所在。

要使其在较旧的 IE 中工作，您应该能够将两者都设置为 "display:block" 并使用 "float:left"

浮动列表项

仅仅这样做并不能使它看起来像素完美，但它应该运行良好。

编辑：如果您更改菜单并且担心旧版浏览器，请保持简单 - 您不需要 JavaScript 来制作下拉菜单。（您还可以在 CSS 中制作适用于现代浏览器且不会破坏旧浏览器的动画。）默认情况下隐藏子菜单并在将鼠标悬停在父菜单上时显示子菜单。

ul.menu li.menu-item ul.sub-menu{
display:none;
}
ul.menu li.menu-item:hover ul.sub-menu{
display:block;
}

Website Menu Not Displayed Properly in IE8