3

大家好 - 我一直在尽可能多地搜索这个，但我所做的似乎无济于事。

我一直在一个网站（www.philipdukes.co.uk）上工作，虽然导航似乎在 FF、Safari、chrome 甚至 IE6 中运行良好（奇迹般地），但在我的系统上，它在 IE8 中惨遭失败：导航链接不起作用。

我将鼠标悬停在它们上面，得到翻转动画，但它们不是“可点击的”。它们是基本的文本链接，文本在屏幕外对齐，然后它们所代表的区域应该是可点击的。填充空间的图像不是链接。如果我删除图像，我可以单击该区域，如果我删除文本对齐，我可以单击链接文本（但只有链接文本）。

这让我发疯了，因为这是我在一切正常之前需要整理的最后一件事......

导航栏的代码在这里：

    <div class="navHolder">
    <div class="nav current-home">
        <div id="home"><img src="images/nav/home.png" alt="home." /><a href="index.html">home.</a></div>
        <div id="bio"><img src="images/nav/bio.png" alt="biography." /><a href="bio.html">biography.</a></div>
        <div id="media"><img src="images/nav/media.png" alt="media." /><a href="media.html">media.</a></div>
    </div>
    <div class="nav2 current-home">
        <div id="press"><img src="images/nav/press.png" alt="press." /><a href="press.html">press.</a></div>
        <div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." /><a href="pdr.html">Plane Dukes Rahman Trio.</a></div>
        <div id="contact"><img src="images/nav/contact.png" alt="contact." /><a href="contact.php">contact.</a></div>
  </div>

并且 css 样式在这里（也欢迎在这里进行任何优化！）：

    /*
*
*   BEGIN NAV SECTION
*
*/
.navHolder{
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
}
.nav, .nav2 {
    width: 600px;
    height: 50px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
    position: absolute;
    top: 0px;
    overflow: hidden;
    width: 200px;
    height: 50px;
    background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
    position: absolute;
    z-index: 100;
    display: block;
    top: 0px;
    height: 50px;
    width: 200px;
    text-indent: -9000px;
}
.nav img, .nav2 img{
    position: relative;
    z-index: 50;
    width: 200px;
    height: 50px;
}
#home, #press{
    left: 0;
}
#bio, #pdr{
    left: 200px;
}
#media, #contact{
    left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
    background-position: 0 -246px;
}
4

3 回答 3

4

你错过了：

.nav a, .nav2 a  {
    left: 0;
}

那应该可以解决问题。使用时始终设置垂直（top或bottom）和水平（left或right）放置position:absolute。

更新

任何时候background设置 a ，它都会按预期开始工作。通过大量测试，您可能会找到解决问题的不同方法。但这就是我要做的：

最好的方法：

  1. 要么摆脱img标签，要么隐藏它们，而是将它们background-image应用于你的a标签。
  2. position将a标签更改为，relative而不是absolute因为它们是父级唯一可见的子级div

快捷方式

.nav a, .nav 2 { background: url(/images/shim.png) }

哪里shim.png是 8 位完全透明、一个像素的 PNG。一个 8 位的 PNG shim 小于相同尺寸（1 像素）的 gif，一切仍将按计划工作。

于 2009-12-03T18:43:44.867 回答
1

为 IE8 提供与 IE7 相同的样式，然后将以下元素放入文档头部：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

这将使 IE8 模拟 IE7。因为您对 IE7 没有任何问题，所以我认为这对您有用。

于 2009-12-03T18:46:45.673 回答
0

不完全确定那里发生了什么，但似乎是链接和图像元素的分层存在某种问题（可能是 IE8 错误）。当我将z-indexof更改.nav img, .nav2 img为任何负值而不是 50 时，链接变得可点击。

不过，我不确定在这种情况下这是否可行，因为负 z-index 可能会导致图像不再可见。

于 2009-12-03T18:54:00.727 回答