IE8-导航链接，没有工作

Question

嘿-我已经google搜索这尽可能的，但没有我这样做似乎有帮助。

我已经工作一个网站(www.philipdukes.co.uk)，并虽然导航似乎工作现在FF，野生动物园、铬、甚至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;
}

Answer 1

你是缺失：

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

应该解决的问题。总是垂直的(top 或 bottom) 和 水平(left 或 right)安置在使用时 position:absolute.

更新

随时随地 background 设置，它开始工作，如预期的那样。通过大量的试验，你将可能寻找不同的方式解决问题。但这是什么我都会做的事：

最好的方式:

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垫片是小于相同的层面(1素)gif，一切都仍然将工作计划。

Answer 2

提供相同的样式IE8你服务到IE7，然后把下面的元素在文档头部：

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

这将使IE8仿效IE7。因为您在使用IE7没有问题，我相信这会为你工作。

Answer 3

不能完全确定发生了什么事情在那里，但似乎是某种问题（也许一个IE8的bug）与链接和图像元素的层次感。当我改变z-index的.nav img, .nav2 img任何负值，而不是50，则链接成为点击。

我不知道这是在这种情况下，实际的可能性，不过，因为负的z-index可能会导致图像不再可见。