Question

在我的网站上： http://elektrikhost.com/ 当您尝试单击链接时，它们将被禁用。我认为这是因为导航栏末尾有2个图像。我试图从导航中删除图像，但导航分崩离析。这是一个客户的网站，我必须有这些图像。

我怎样才能让它发挥作用？

我的HTML：

<div class="ref1"> <img src="images/ref1.png" alt="Ref" /> </div>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about-us.html">About Us</a></li>
      <li><a href="https://clients.elektrikhost.com/">Client Login</a></li>
      <li><a href="https://clients.elektrikhost.com/submitticket.php">Support</a></li>
      <li><a href="contact.html">Contact</a></li>

    </ul>
  </nav>
  <div class="ref2"><img src="images/ref2.png" alt="Ref" /></div>

CSS：

/* -- NAV -- */
nav { background: #282828 url(../images/nav-bg.jpg) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: -37px 0 -28px 0; }
nav ul { padding: 21px 0;  }
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 0 47px; margin: 0 8px 0 0;  }
nav ul li:first-of-type { background: none; }
nav ul li a { color: #626262; font: 1.2em Arial, Helvetica, serif; }
nav ul li a:hover { color: #dfdfdf; }

.ref1 { position: relative; top: 8px; left: -2px; }
.ref2 { position: relative; top: -17px; left: 844px; }

Answer 1

使用Firebug查看该网站，我可以看到<div class="ref1">与链接文本重叠。它（隐含地）处于比链接文本更高的z级别，因此阻止了点击进入。

我认为div只包含一个完全位于链接左侧的图像，所以如果你设置.ref1的宽度使它不会比它需要的那样进一步扩展，那就应该把你排除在外。

Answer 2

这是因为

<div class="ref1"> <img src="images/ref1.png" alt="Ref" /> </div>

在你的链接上。为什么你需要那个？

Answer 3

看起来ref1导致了问题 - 它似乎覆盖了您的链接。

快速测试可能会更改z-index以查看是否存在问题。

.ref1 { position: relative; top: 8px; left: -2px; z-index: 99999; }

Answer 4

当我删除“position：relative;” “ref1”与萤火虫的关系，链接工作。

链接已禁用

4 个答案: