导航列表菜单在IE8中不工作
nav list menu not working in IE8
我尝试了下面的菜单代码。它可以在除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]-->
您可以添加任何其他不支持此方式的元素。
你也可以使用谷歌的html5shiv
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
相关文章:
- IE8更改文本区域上的事件侦听器不工作
- window.onbeforeunload在IE8中不触发(在Firefox,Chrome和Safari中工作正常)
- $('body').on('blur')在IE8中工作不好
- window.location重定向没有'我不在IE8上工作
- addEventListener没有'不能在IE中工作(在IE8中测试)
- Requirejs和主干应用程序,不能在IE8中工作
- 无法在 IE 9 中传递此运算符的值,而它在 IE7 和 IE8 中工作正常
- Request.UrlReferrer在IE8中无法正常工作,并且工作正常IE9
- 不触发 OnClick 事件 IE8,但在 Firefox 中工作正常
- 如何优化我的jQuery以始终在IE8中工作,目前它被击中和错过
- 获取尾随逗号(在JavaScript中)在IE7 / IE8中工作
- FormData ajax 上传 IE8 -> 替代品及其工作原理
- jquery设置隐藏的输入值在IE7和IE8中未按预期工作
- 在 IE8 中单选按钮上更改无法正常工作
- 如何让 jQuery methos text() 函数在 IE8 中工作
- 重写一个Javascript函数,该函数可以选择在IE8中工作的活动导航选项卡
- 修复了在页面底部加载时html5标签IE8不工作的问题
- js库无法在IE8中工作
- 输入类型=“file".submit()不工作IE8
- 让cufon在IE7中工作IE8 -我已经按照文档做了所有的事情