我尝试了以下菜单代码。它在 IE8 以外的所有浏览器中工作正常。我意识到导航标签在 IE 中不起作用，用谷歌搜索并尝试了一些脚本。但它仍然不起作用。我试过的脚本包含在下面的代码中。
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />
<head>
<style>
header, nav, section, article, aside, footer, hgroup {
display: block;
}
a{text-decoration:none;color:#0095d3}
a:hover,a:active,a:focus{text-decoration:none;}
textarea:focus, input:focus, select:focus {color: #0092cf;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
textarea:focus, input:focus, select:focus {color: #0092cf;}
.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; overflow: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
.mobile {display: none;}
/* COMMON */
/* NAV */
nav {margin: auto; position: relative; max-width: 700px; height: 100%; z-index: 1; font-size:12px; border-radius: 10px;}
nav ul {list-style: none; margin: 0; padding: 0; }
nav li {float: left; list-style: none; font-size:13px;
background-image:url("http://images.connect.vmware.com/eloquaimages/clients/VMWare/%7B929a33cd-0723-4765-8bd1-8973fe5aaf96%7D_menu_bg.jpg");
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://images.connect.vmware.com/eloquaimages/clients/VMWare/%7B929a33cd-0723-4765-8bd1-8973fe5aaf96%7D_menu_bg.jpg',
sizingMethod='scale');
background-repeat: no-repeat;
width: 154px;
height: 32px;
line-height:30px;
text-align:center;
}
nav li a{
color: #060;
font-size: 14px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
}
/*nav li:first-child a{margin-left: 22px; border-left: none;}*/
nav a {padding: 0px 22px;width: 110px; text-decoration: none; color: #666; line-height: 33px; display: inline-block; text-align: center; text-decoration: none; font-size:12px; font-weight: bold;}
nav li:last-child a{border-right: none;}
.slide-trigger {display: none; background-color: #397d2d; max-width: 100%; position: relative; color: #FFF; padding: 10px; border: 1px solid #CCCCCC;cursor: pointer; font-size:12px; line-height: 20px;}
.slide-trigger span {display: block; background: url(http://campaign.vmware.com/imgs/apac/templates/26002_APAC_PEX/ANZ/images/nav-icon.png) no-repeat; float: left; padding-right: 15px; height: 20px; width: 20px;}
</style>
<!-- Nav JS -->
<script src="https://modernizr123.googlecode.com/svn/modernizr-2.5.3.min.js"></script>
<script src="https://modernizr123.googlecode.com/svn/jquery.min.js"></script>
<script src="https://modernizr123.googlecode.com/svn/plugins.js"></script>
<script src="https://modernizr123.googlecode.com/svn/script.js"></script>
<script type="text/javascript" src="https://modernizr123.googlecode.com/svn/utilities.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->
</head>
<body>
<nav class="clearfix"><!-- START 'nav' -->
<h2 class="slide-trigger">Menu <span></span></h2>
<ul class="navigation clearfix">
<li><script language="javascript" type="text/javascript">document.write("<a href=https://www.google.co.in?src=" +getParameter('src')+"&ossrc="+getParameter('ossrc')+"&elq="+getParameter('elq')+" style='color: #060; font-size: 14px; font-weight: bold; font-family: Arial;text-decoration:none'>");</script>HOME</a></li>
<li><script language="javascript" type="text/javascript">document.write("<a href=https://www.google.co.in?src=" +getParameter('src')+"&ossrc="+getParameter('ossrc')+"&elq="+getParameter('elq')+" style='color: #060; font-size: 14px; font-weight: bold; font-family: Arial;text-decoration:none'>");</script>CONTACT</a></li>
<li><script language="javascript" type="text/javascript">document.write("<a href=https://www.google.co.in?src=" +getParameter('src')+"&ossrc="+getParameter('ossrc')+"&elq="+getParameter('elq')+" style='color: #060; font-size: 14px; font-weight: bold; font-family: Arial;text-decoration:none'>");</script>ABOUT</a></li>
</ul>
<!--a href="#" id="pull">Menu</a-->
</nav><!-- END 'nav' -->
</body>
</html>
最佳答案
在你的标题中添加:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
您可以添加不支持这种方式的任何其他元素。
你也可以使用 google 的 html5shiv
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
关于javascript - 导航列表菜单在 IE8 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23478908/