Question

我为菜单尝试了以下代码。它在IE8以外的所有浏览器中都运行良好。我意识到nav标签在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>

Answer 1

在标题中添加：

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

您可以添加此方式不支持的任何其他元素。

您也可以使用谷歌的html5shiv

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

导航列表菜单在IE8中不起作用

1 个答案: