我有一个自定义工具提示功能(在 jQuery 中)，它在所有[主要]浏览器(甚至在 IE8 中)都运行良好除了IE7。
网站的文档类型是较新的 html 5 文档类型 ( <!DOCTYPE html> )。
有 5 个链接/图像。 IE7 正确显示第一个工具提示(减去一些小的布局问题 - 但可以修复)，但在其他链接(图像)上，它会恢复到其余链接的原始浏览器工具提示。
$('#port-window a').hover(function() {
var tip = $(this).attr('title');
$(this).attr('title','');
$(this).append("<div id='tooltip'>"+ tip +"</div>");
$("#tooltip")
.css("position","relative")
.css("z-index","999")
.fadeIn("slow");
}, function() {
$(this).attr('title',$('#tooltip').html());
$(this).children('div#tooltip').remove();
});
标题的 HTML 是这样的:
<ul class="portfolio">
<li>
<div id="port-window">
<a title="This is the title" href="[blogurl]/work/web-design-dev/website/">
<span class="window"></span>
<span class="gradient"></span>
<img src="[blogurl]/portfolio-images/thumbs/image.jpg" alt="alt tag info" title="img title attr - not used" />
</a>
</div>
</li>
</ul>
任何人都可以阐明如何解决此问题吗？
最佳答案
在 IE7 中检查此 http://jsfiddle.net/Xg7ru/1/
你犯的错误并不难发现，你在一个页面中使用了 id #port-window 3 次，这对于 CSS 来说通常不是问题，但是 jQuery 会使用给定的值返回 DOM 中的第一个元素ID 因此它适用于第一张图片。我真的不确定它在其他浏览器中是如何工作的。
我将 HTML 标记从 id='port-window' 更改为 class='port-window' 并相应地更改了 JS、CSS 中的选择器，现在它在 IE7 中对我来说似乎工作正常。
编辑:根据规范，给定 ID 只能有一个 DOM 节点
关于jQuery 自定义工具提示(不是 ui)仅在 IE7 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12696541/