【发布时间】：2013-04-28 08:08:21
【问题描述】：
我遇到了 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 的问题。
请注意； Fiddle 中的边框不是设计的一部分。由于图像不可用，它们仅用于显示框架。但是，一个有趣的注意事项是，IE 确实识别了 photo-nav div 的边框，然后会对悬停做出反应，但不会对 div 的主体做出反应。
另一个注意事项：如果我将 img 更改为 div 并改用背景图像，IE 似乎可以正常工作，但这会导致其他问题，因为我无法/不知道如何挂钩背景图像的 onload 事件.
最后，文档类型是<!DOCTYPE html>
【问题讨论】：
-
我不确定您所说的“点击”是什么意思，因为这是一个悬停问题，但正如我所说，边框不是我实际设计的一部分，但在小提琴中悬停在它上面确实造成应有的效果。我确实认为绝对定位是一个问题，但正如我所说，如果我将 img 更改为 div，它可以正常工作。
-
我的意思是
:hover.. 将鼠标悬停在.photo-nav的左边框上，你会看到.photo-nav-icon出现，很明显它的宽度由于某种原因折叠起来使它看起来像它不工作 -
是的，边框确实有效，但不幸的是，边框不是我实际最终设计的一部分。我不知道为什么它会崩溃，因为我给了 .photo-nav 一个宽度，而 .photo-nav-icon 也有一个宽度。
-
这有点奇怪，我还在想为什么 ..
-
我的头发已经拉了好几个小时了！
标签： internet-explorer css