Question

我的导航菜单在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;
}

Answer 1

IE 8及更低版本不支持nav标记，为了避免这种情况，只需包含一个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]-->

Answer 2

nav 标记是IE7 / IE8中不支持的html5标记在head section中添加此标记：tag：

<!--[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]-->

Answer 3

<nav>标记。
:first-child。
:last-child。
display: inline-block，但有一些重大错误。

所有这些问题都将破坏您的菜单。

要修复（1）使用html5shiv或Modernizr，或者只是不要在较旧的IE中使用HTML5标记。

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

要修复（4）使用特定于IE的CSS黑客强制IE6 / 7改为使用display:inline。

我的导航菜单不适用于IE＆lt; 9

3 个答案: