2017-03-28 51 views
0

我有一個移動菜單在Internet Explorer中的問題它不起作用 - 我仍然有桌面viev菜單。在鉻,火狐,歌劇是好的。錯誤在哪裏,我可以修復它?菜單移動不能在Internet Explorer中工作

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>

+1

什麼版本的IE?控制檯中有任何錯誤?你能提供一個最小,完整和可驗證的例子嗎? https://stackoverflow.com/help/mcve –

+0

Windows IE 11和移動我不看版本,但手機有Windows 8.1。在控制檯中,我沒有看到任何錯誤。 – Micho

+0

可悲的是,我們無法提供很多幫助而無法自己運行它,但它看起來像代碼是好的,IE支持您使用的JavaScript,所以我會嘗試確保元素是「可點擊的」 ,如在,使其變大或確保沒有任何重疊,並且它仍然引發事件。您還應該通過添加一些警報或確保其執行的方式確保該功能甚至可以運行。 –

回答

0

審查您的網站後,我堅信你有一些分析錯誤。有些瀏覽器會忽略它們並正確處理錯誤,這就是爲什麼它可以在Chrome上運行的原因,但是IE對此有點挑剔。

具體來說,你有很多沒有正確關閉的括號。您可以使用像http://csslint.net/這樣的服務來正確識別折線。

沒有別的毛病CSS的錯誤是,.icon永遠不會出現由於CSS的那部分(媒體查詢其設置爲display: inline-block)不能被解釋在IE所以還是讀display: none;

相關問題