2014-05-05 2 views
0

Я пробовал следующий код для меню. Он отлично работает во всех браузерах, кроме IE8. Я понял, что тег nav не будет работать в IE, googled и попробовал некоторые скрипты. Но все равно это не работает. Скрипты, которые я попробовал, включены в приведенный ниже код.nav список меню не работает в IE8

<!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> 
+0

Не работает. спасибо в любом случае – user3589255

+0

Тогда опишите, что означает «ни рабочий». – CBroe

+0

Я не могу нажать ссылку меню в IE8 – user3589255

ответ

0

В вашем заголовке объявления:

<!--[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 от Google

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

Не работает. спасибо – user3589255

+0

Он работает для меня в IE8? Что НЕ работает над этим? –

+0

Я не могу нажать ссылку в IE8. – user3589255

Смежные вопросы