IE6/7/8 中的 jQuery 菜单问题。链接消失

Posted 2023-05-08

【中文标题】IE6/7/8 中的 jQuery 菜单问题。链接消失

【英文标题】：Problem with jQuery menu in IE6/7/8. Links disappear

【发布时间】：2011-07-06 07:54:18

【问题描述】：

我正在制作的网站的菜单有一个奇怪的问题。它的问题 - 当然 - Internet Explorer（所有版本）。当我将光标移到菜单元素上时，它会显示一次然后消失。您可以在 IE 下查看：link to the site 在此之后，每个菜单元素都不可点击：-[

PS。我只是想补充一下，我尝试了 *.jpg 和 *.gif 而不是 *.png 背景，但没有结果。

好的。我有 menu.js

$('#nav a').hover(function()
    $(this).stop().animate(opacity: 1, 'slow');,
    function()
    $(this).stop().animate(opacity: 0, 'slow');
);

在 css 中有：

body#start ul#nav background: transparent url('../img/buttons_bckgd.png') no-repeat 0 0;

#top_menu #nav li float: left;

#top_menu #nav li a 
   display: block;  
   height: 60px;
   margin-top: 7px;
   opacity: 0;
   

.home 
   width: 163px;
   margin-left: 12px;
   

.home:hover background: url('../img/buttons_bckgd.png') no-repeat -12px -382px;

html部分是纯标准：

<ul id="nav">
   <li><a class="home" href="#"></a></li>
   <li><a class="offer" href="#"></a></li>
   <li><a class="gallery" href="#"></a></li>
   <li><a class="contact" href="#"></a></li>
</ul>

任何想法为什么会消失以及如何解决这个问题？

【问题讨论】：

在 Firefox 中能用吗？

是的，它适用于 Firefox/Opera/Chrome/Safari 等。

【参考方案1】：

这很奇怪。我根据您的代码为您设置了一个示例。 http://jsfiddle.net/Ruhley/emHFY/。它适用于我在 IE7 上，你呢？

【讨论】：

非常非常奇怪。您的示例甚至适用于 IE！我会检查我的代码的其余部分：-/

【参考方案2】：

好的，第二次尝试 :-) 我做了一些测试 http://jsfiddle.net/7h6Vn/ 应该适用于所有浏览器。然而，我需要添加以使其在 IE6 中工作的关键 CSS 属性是 #nav li a 规则中的 background-color: white; 行。如果你把它拿出来，那么悬停动画在第一次之后就会被破坏。

我只有 IE6，所以这可能无法解决所有 IE 版本的问题。

编辑：这似乎解决了悬停问题，但您可能需要将背景颜色设置为不同的菜单。

还要感谢那个让我记忆犹新的网站 background-color 修复 - http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/

编辑 2：好的，这 http://jsfiddle.net/7h6Vn/1/ 绝对有效（将鼠标悬停在结果区域上）。我正在链接到您的图像以显示悬停淡入淡出动画。在玩弄这项工作的同时，我也遇到了与solved here 相同的问题。最后要注意的一点是，我需要为非标准的 IE 添加 CSS 不透明度过滤器，因此您可能希望将其放在单独的 IE 特定 CSS 文件中。

我不确定这正是你想要的，但玩这个还是很有趣的。

【参考方案3】：

你能不能把代码放在同一个页面而不是不同的脚本文件中。

打开IE8开发者工具调试menu.js脚本显示，鼠标第二次悬停时，代码没有执行。

【讨论】：

嗨！我已将代码直接放入 index.php 顶部或

【参考方案4】：

仅在文档准备好时尝试添加事件连接，类似于：

$(document).ready(function() 
  // Do menu event wiring here...
);

...并在关闭正文标记之前添加脚本链接包含。它通常对我有用。

【讨论】：

对不起，我没有写这个，但 $(document).ready(function() 最初在代码中。我现在就编辑它。

【参考方案5】：

DD_belatedPNG 脚本是否会干扰背景图像属性？我知道您说过您尝试过使用不同的图像类型，但您是否尝试过删除 PNG 修复脚本？这在 http://jsfiddle.net/Ruhley/emHFY/ 中不存在，这可能解释了为什么它在该演示中有效，而不是在您的网站上。

【讨论】：

不幸的是 DD_belatedPNG 脚本仅在 IE6 中有条件注释，因此在 IE8 中不应干扰。

问题似乎出在styles.css 文件中的:hover 样式中。如果我删除 jQuery 菜单代码，那么它可以在 IE8 中运行，但在其他浏览器中会出现故障。

我在另一条评论中添加了第二个潜在的solution，它在 Firefox、Chrome 和 IE6 中对我有用。