IE8 - 导航链接不起作用

Posted

技术标签:

【中文标题】IE8 - 导航链接不起作用【英文标题】:IE8 - navigation links not working 【发布时间】:2010-12-22 22:43:22 【问题描述】:

大家好 - 我已经尽可能多地在谷歌上搜索,但我所做的似乎无济于事。

我一直在网站 (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"  /><a href="index.html">home.</a></div>
        <div id="bio"><img src="images/nav/bio.png"  /><a href="bio.html">biography.</a></div>
        <div id="media"><img src="images/nav/media.png"  /><a href="media.html">media.</a></div>
    </div>
    <div class="nav2 current-home">
        <div id="press"><img src="images/nav/press.png"  /><a href="press.html">press.</a></div>
        <div id="pdr"><img src="images/nav/pdr.png"  /><a href="pdr.html">Plane Dukes Rahman Trio.</a></div>
        <div id="contact"><img src="images/nav/contact.png"  /><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;

【问题讨论】:

@sheam89,你解决了吗? 在我的最新项目中进行类似手风琴的导航时,我偶然发现了同样的问题。这真是太痛苦了:/而且我无法切换到背景图像,因为我使用 img 来拉伸背景渐变。 【参考方案1】:

你不见了:

.nav a, .nav2 a  
    left: 0;

这应该可以解决问题。使用 position:absolute 时,请始终设置垂直(topbottom 水平(leftright)放置。

更新

只要设置了background,它就会按预期开始工作。通过大量测试,您可能会找到解决问题的不同方法。但这是我会做的:

最佳方式

    要么去掉img标签或隐藏它们,而是将它们作为background-image应用到你的a标签。 将a 标签上的position 更改为relative 而不是absolute,因为它们将是父div 的唯一可见子

快捷方式

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

shim.png 是一个 8 位全透明、一个像素的 PNG。 8 位 PNG shim 小于相同尺寸(1 像素)的 gif,一切仍将按计划进行。

【讨论】:

好的,现在有两个建议的解决方案。两者都可以,第二个是我在 IE8 中使用开发者工具测试的。 太棒了,谢谢 dcneiner:我现在选择了快速的方法,直到我可以使用更好的解决方案!非常感谢你们的快速反应。 您的快速解决方案也适用于我的情况。这一定是一些讨厌的 IE8、IE7 z-index 相关错误,因为在所有其他浏览器(Chrome 4、Opera 10.51、FF 3.6、Safari 4.x)中都没有这样的问题。 太棒了!感谢 Doug 的解决方案!【参考方案2】:

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

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

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

【讨论】:

那么当 IE9 出现时,您将不得不为此添加另一个,然后当 IE10... 不是一个很好的解决方案时,IMO。 甚至在兼容模式下运行他的页面也没有解决问题。 没有提供给 IE7 的特定样式,该工作表只适用于除 8 之外的所有其他内容,@dcneiner 说得对,它也不能修复它...【参考方案3】:

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

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

【讨论】:

它确实隐藏了图像,它们是实际的“家庭”“媒体”等图像。

以上是关于IE8 - 导航链接不起作用的主要内容,如果未能解决你的问题,请参考以下文章

JS li 标签 onclick 在 IE8 上不起作用

为啥通过动态链接导航后pushViewController 不起作用?

Bootstrap 4 - 导航栏切换不起作用。它没有显示任何导航链接

Bootstrap、WordPress 和 NavWalker - ***导航链接不起作用

鼠标悬停导航链接不起作用

如果堆栈大小> 1,则弹出后 SwiftUI3 导航链接不起作用