基於ul的導航不適用於iOS Safari/Chrome

導航區域的奇怪問題。它適用於所有桌面瀏覽器，但不適用於iOS Safari和Google Chrome。點擊鏈接什麼也不做，儘管點擊並按住會彈出菜單，要求在新窗口中打開鏈接，所以在這種情況下，它會被識別爲鏈接。基於ul的導航不適用於iOS Safari/Chrome

任何人都可以發現我做錯了什麼嗎？

感謝您的幫助！

HTML：

<div id="nav"> 
<h1>Site title<span><a href="/"></a></span></h1> 
<ul> 
    <li id="nav-reserveren"><a href="/reserveren/">reserveren</a></li> 
    <li id="nav-kalender"><a href="/kalender/">kalender</a></li> 
    <li id="nav-interieur"><a href="interieur/">interieur</a></li> 
    <li id="nav-contact"><a href="/contact/">contact</a></li> 
    </ul> 
</div>

相關CSS：

#nav h1 { 
    text-indent: -9999px; 
    font-size: 0; 
    margin: 0; 
    padding: 0; 
    width: 451px; 
    height: 81px; /*same as span height*/ 
    position: relative; 
} 

#nav h1 span a { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 451px; 
    height: 81px; 
} 

#nav ul { 
    position: absolute; 
    left: 461px; 
    top: 14px; 
    list-style-type: none; 
} 

#nav ul li { 
    display: inline; 
} 

#nav ul li a { 
    float: left; 
    height: 60px; 
    text-indent: -9999px; 
} 

#nav ul li#nav-reserveren a { 
    width: 203px; 
    background: transparent url(../img/nav/reserveer.png) top left no-repeat; 
} 

#nav ul li#nav-kalender a { 
    width: 109px; 
    background: transparent url(../img/nav/kalender.png) top left no-repeat; 
} 

#nav ul li#nav-interieur a { 
    width: 96px; 
    background: transparent url(../img/nav/interieur.png) top left no-repeat; 
} 

#nav ul li#nav-contact a { 
    width: 90px; 
    background: transparent url(../img/nav/contact.png) top left no-repeat; 
}

編輯：解決。 問題是設置在jQuery的鏈接的不透明度：

var navLink = $('#nav ul li a'); 
navLink.css('opacity', '0.8'); 
navLink.mouseover(function(){ 
    $(this).css('opacity', '1'); 
}); 
navLink.mouseout(function(){ 
    $(this).css('opacity', '0.8'); 
}); 
$('#nav ul li a.active').css('opacity', '1');

移動這種過度到直CSS的伎倆！

來源

2015-08-31 Mudshark

由於h1是一個帶有relative且ul爲絕對的塊元素。 ul傾向於在h1下使得鏈接不可點擊。

- >添加顯示：內聯塊到h1
或
- >添加一些z索引（上述1）至UL

任一個應當解決的問題。

來源

2015-08-31 12:10:48 Chetan

這是有道理的，似乎已經解決了這個問題（我說「出現」，因爲我的iPad顯示緩存版本，所以我只能檢查我的iPhone，鏈接確實工作正常）。謝謝Chetan！ – Mudshark

從頭開始:(我以爲這會解決問題，但直接在iPad上重新加載.css文件，然後重新加載頁面，我仍然有同樣的問題... – Mudshark

基於ul的導航不適用於iOS Safari/Chrome

回答

相關問題