3

我遇到了 IE9 的问题。当悬停 .photo-nav 时， .photo-nav-icon 应该变得可见。这在我尝试过的所有其他浏览器中都可以正常工作。

这是我的标记：

<div class="photo-content">
    <img class="photo-img" src="/Images/empty.gif" />
    <div class="photo-nav prev" data-direction="prev">
        <div class="photo-nav-icon prev"></div>
    </div>
    <div class="photo-nav next" data-direction="next">
        <div class="photo-nav-icon next"></div>
    </div>
</div>

这是我的CSS：

.photo-content { position: relative; width: 600px; height: 400px; margin: 0 auto; }
.photo-img { width: 600px; height: 400px; display:block; }
.photo-nav { position: absolute; height: 400px; width: 72px; }
.photo-nav.prev { top: 0; left: 0; }
.photo-nav.next { top: 0; right: 0; }
.photo-nav-icon { height: 60px; width: 60px; display: none; }
.photo-nav-icon.prev { margin: 170px 0 0 10px; }
.photo-nav-icon.next { background-position: 0 -60px; margin: 170px 10px 0 0; }
.photo-nav:hover > .photo-nav-icon { display: block; }

这是问题的小提琴。

请注意; Fiddle 中的边框不是设计的一部分。由于图像不可用，它们仅用于显示框架。然而，一个有趣的注意事项是，IE 确实识别了 photo-nav div 的边框，然后会对悬停做出反应，但不会对 div 的主体做出反应。

另一个注意事项：如果我将 img 更改为 div 并改用背景图像，IE 似乎可以正常工作，但这会导致其他问题，因为我无法/不知道如何挂钩背景图像的 onload 事件。

最后，文档类型是<!DOCTYPE html>

4

2 回答 2

3

除了其他人经历过同样的事情外，我无法找到有关此问题的任何进一步信息。悬停在 Internet Explorer 中不起作用

正如 Woody 所建议的，这个问题可以通过添加一些背景颜色来解决，但是当然，即使不透明度很小，这也不是我们想要的 UI，因为导航必须是透明的。

我偶然发现的一个解决方法是设置 .photo-nav-icon 的 opacity 属性而不是 display 属性：

.photo-nav-icon { background-image: url(/Images/nav.png); height: 60px; width: 60px; opacity:0; }
.photo-nav:hover > .photo-nav-icon { opacity:1; }

这仅适用于图标本身，并且仍然不会响应悬停在整个 .photo-nav div 上，而且我不喜欢使用不透明度，因为每个浏览器都有自己的处理方式。

因此，正如另一篇 SO 帖子中所述，我只是添加了一个透明 gif 图像作为 .photo-nav div 的背景，从而解决了问题：

.photo-nav { position: absolute; height: 400px; width: 72px; background:url(/Images/empty.gif); }

我对这个解决方案并不感到兴奋，但它确实有效。

于 2013-05-04T20:11:49.623 回答
1

如果你给 .photo-nav 一个背景（例如 rgba(0,0,0,0.25)，它会起作用，但我不知道为什么。我想这可能是一个 z-index 问题，但给 .photo-nav 一个z-index > 0 在这里没有帮助。

IE 只检测鼠标在边框上，否则它似乎认为鼠标不在照片导航上 - 与 JS 鼠标侦听器函数相同。

所以使它起作用的事情是：

a) 给 .photo-nav 元素一个背景。b) 从 .photo-content 中删除 position:relative

于 2013-05-04T14:57:55.593 回答