菜单移动无法在Internet Explorer中使用

Question

我在Internet Explorer中无法使用移动菜单，但仍然无法使用-我仍然从桌面Viev获得菜单。 在Chrome，Firefox中，歌剧是不错的选择。 错误在哪里，我该如何解决？

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 

 @media screen and (max-width:579px) { ul.topnav li {display: none;} ul.topnav li.icon { display: inline-block;} } @media screen and (max-width:579px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 40px; } } ul.topnav.responsive li { float: none; display: inline; } 

 <nav id="menu"> <ul class="topnav" id="myTopnav"> <li><a class="active" data-scroll-nav='1'>Home</a></li> <li><a data-scroll-nav='2'>text1</a></li> <li><a data-scroll-nav='3'>text2</a></li> <li><a data-scroll-nav='4'>text3</a></li> <li><a data-scroll-nav='5'>tex4</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a> </li> </ul> </nav> 

Answer 1

审查您的网站后，我坚信您有一些解析错误。 某些浏览器会忽略它们，并正确解决您的错误，这就是为什么它可以在Chrome上运行的原因，但是IE对此有些挑剔。

具体来说，您有很多括号没有正确闭合。 您可以使用http://csslint.net/之类的服务来正确识别中断线。

CSS没有其他问题，因为该错误是.icon从未出现，这是因为该部分CSS（媒体查询将其设置为display: inline-block ）没有在IE中进行解释，因此它仍display: none;为display: none; 。