CSS 菜单在 IE7 中左对齐 - 如何在所有浏览器（IE7、IE8、Firefox 等）中居中菜单答案

【问题标题】：CSS menu align left in IE7 - how to center menu in all browsers (IE7, IE8, firefox, ect)CSS 菜单在 IE7 中左对齐 - 如何在所有浏览器（IE7、IE8、Firefox 等）中居中菜单
【发布时间】：2011-08-30 17:15:09
【问题描述】：

这个菜单有问题：http://www.krillhome.com/home1.html

问题在于，在 IE 7 中，css 菜单向左对齐，我需要它居中。当我将align="center" 添加到 div 时，这可以解决 IE7 中的问题，但是这会将整个菜单推到右侧大约 20 个像素的其他浏览器中。

我以为我的利润可能已经关闭，但它们看起来还不错。我希望我可以添加，但这也不起作用。

这是它在 IE7 中的样子：http://www.krillhome.com/incorrect.png（注意菜单左对齐）

【问题讨论】：

标签： css internet-explorer html internet-explorer-7

【解决方案1】：

我注意到您的菜单实际上并没有居中，它只是有一些左填充（很可能继承自默认浏览器样式）。 ul 没有删除它的填充。尝试添加这些样式：

.nav-wrap { text-align:center }
.nav-wrap ul { padding:0 }

试一试，看看它是否使您的菜单居中。它适用于我的 Firefox。您可能更愿意使用display:block;margin:0 auto;width:***px。

一些“顺便”的cmets：

由于您已经有 IE 条件语句为不同版本的 IE 添加类到 <html> 标记，您可以像这样定位这些浏览器：

html.ie7 {/* some rule for IE7 */}

我看到你有 HTML5 文档类型，但你有很多“老派”（又名已弃用）HTML 属性。 align 无效并且已经有一段时间没有了。我强烈建议完全删除这些并坚持使用 CSS。

那里也有一些 javascript 解析错误。你应该熟悉Firebug。另请查看CSS reset。

【讨论】：

太棒了，谢谢，我使用了一个 css 重置并且有效.. 非常感谢（ps 我正在清理我过时的代码）

【解决方案2】：

将text-align:center 应用于 UL 将在 IE7 中居中对齐。它似乎不会影响那个小绿条（它仍然与左侧对齐），但列表项本身是居中的。

编辑：您可以使用条件 cmets 仅在 Internet Explorer 7 中应用此 CSS：

<!--[if lte IE 7]> <link rel="stylesheet" href="..." type="text/css"> <![endif]-->

【讨论】：