我的导航菜单不适用于 IE < 9 [关闭]答案

【问题标题】：My nav menu won't work on IE < 9 [closed]我的导航菜单不适用于 IE < 9 [关闭]
【发布时间】：2013-04-14 00:37:53
【问题描述】：

我的导航菜单在 IE 6、7 或 8 中无法使用。我可以在 IE 6 中无法使用它，但不幸的是它需要在 IE 7 和 8 中使用。我使用的是 Ubuntu，所以我有一直在使用http://netrenderer.com 进行测试。 nav div 没有向右浮动，并且 li 元素没有内联显示。为什么是这样？ Here is the website.

nav ul {
    margin: 0;
    padding: 0;
}

nav a {
    height: 20px;
    width: 27%;
    margin: 0 1.7%;
    margin-bottom: 0;
    padding: 25px 2%;

    text-align: center;
    text-decoration: none;
    font-weight: thin;

    color: #555;

    float: left;
    display: inline-block;
}

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}


/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */
nav ul li {
    display: inline;
}




nav {
    display: block;
    float: right;
    width: 38%;
    clear: both;
}

【问题讨论】：

请贴一些代码。
问题到底是什么？您正在使用旧浏览器不支持的 HTML5 标签。
我不知道 - 哪些标签是 html5 标签？
<nav> 对于初学者 :) w3.org/TR/html5-diff/#new-elements

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

【解决方案1】：

nav 标签在 IE 8 及更低版本中不受支持，要避免这种情况，只需包含一个 HTML5 填充程序，它会添加对那些正在破坏的标签的支持。尝试在页面的<head> 部分添加此内容：

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

【讨论】：

谢谢 - 我添加了一个在谷歌代码上找到的 html5shiv.js，并将其包含在我的网站中 - 不幸的是它没有解决问题。
@Sam - 如果 html5shiv 不起作用，请尝试使用modernizr。我发现它在 html5shiv 不起作用的情况下有效（这很奇怪，因为它们应该对 html5 标签做同样的事情）。但是，您还有其他问题需要解决（请参阅我的回答），因此您需要做的不仅仅是这个。
@Sam 我不完全确定您包含的 shiv 是否正常工作，我尝试设置导航元素的样式，即使在 shiv 之后也无济于事。我更新了我提供的 shiv 的 url，因为我从我的一个页面复制了它，所以我错误地遗漏了它，但这是我一直使用并且一直有效的那个。
我解决了这个问题 - 我用来从 IE6 的角度查看网站的网站必须禁用了 javascript。我和一个朋友恢复了一台古老的计算机（键盘甚至不是 USB！）并设法运行 Internet Explorer。一切正常。感谢您的帮助:)

【解决方案2】：

nav 标签是 html5 标签在 IE7/IE8 中不支持在 head 部分之前添加这个：标签：

<!--[if lt IE 9]>
<script src="https://raw.github.com/h5bp/html5-boilerplate/master/js/vendor/modernizr-2.6.2.min.js"></script>
<![endif]-->

或者

<!--[if lt IE 9]>
  <script src="https://raw.github.com/aFarkas/html5shiv/master/src/html5shiv.js"></script>
<![endif]-->

【讨论】：

如果你想使用html5标签，这个模板更好：github.com/h5bp/html5-boilerplate

【解决方案3】：

IE8 或更早版本不支持<nav> 标签。
IE7 或更早版本不支持:first-child。
IE8 或更早版本不支持:last-child。
IE6/7 支持display: inline-block，但存在一些重大错误。

所有这些问题都会破坏你的菜单。

要修复 (1) 使用 html5shiv 或 Modernizr，或者只是不要在旧版 IE 中使用 HTML5 标签。

要修复 (2) 和 (3)，请使用 Selectivizr 或 ie9.js。

修复 (4) 使用特定于 IE 的 CSS hack 来强制 IE6/7 使用 display:inline。

【讨论】：