Question

导航区域的奇怪问题。它适用于所有桌面浏览器，但不适用于iOS Safari和Google 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中就可以了！

Answer 1

因为h1是具有相对的块元素，而ul是绝对的。 ul倾向于在h1下面使链接无法点击。

- ＆GT;添加display：inline-block到h1
或
- ＆GT;将一些z-index（大于1）添加到ul

任何一方都应该解决这个问题。

基于ul的导航无法在iOS Safari / Chrome中运行

1 个答案: