css - 有史以来最奇怪的 IE 错误？ -- 悬停链接会导致页面元素跳起来覆盖其他元素

Question

好吧，我已经处理 IE 错误很长时间了，但这个问题超出了我的范围。 IE 7 甚至 8 肯定可以，我在 FF 或 Chrome 上没有看到它。

所以这是生成它的实时 URL:http://mog.com/music/America/Holiday

复制并不容易，可能需要几次才能实现。观察滚动条大小的变化，这样您就知道页面长度突然缩短了很多。

这是你如何做的:

1. 将鼠标悬停在任何子导航链接(主要、专辑、歌曲、照片、新闻等)上

2. 尝试它们，直到您看到滚动条的大小发生变化。完成后，一直向下滚动，注意页脚已经跳到大部分页面内容的顶部。

3. 小心向下滚动，不要滚动到其他一些会突然解决此问题的页面元素上。到目前为止，我可以看到任何播放按钮都会以某种方式解决这个问题。

这简直太奇怪了。翻车状态怎么会导致这种行为？

我试过:

1. 删除 a:hover 样式 - 这修复了它... WTF？当然，我们理想情况下会保留一些悬停状态，因此希望避免此修复。

2. 使用 jQuery hover() 再现悬停功能。 - 这并不能解决问题。

我认为线索在于以某种方式神奇地修复它的元素......并且可能在于页面跳转到的位置，哪些元素突然被页脚遮盖了。

最后，我没有从头开始制作这个网站，它对某些东西使用了大量的绝对和相对定位，我知道这是导致这些奇怪错误的部分原因。我很少，很少使用 esp 绝对定位来避免这类错误，但现在有点太晚了。

感谢任何愿意查看的人!!

Answer 1

嗯，我想通了。这是“断头台”错误的一个奇怪案例。幸运的是，我以前没有遇到过。事实证明，这些导航链接的悬停状态(尤其是边框和背景图像)的“特殊”CSS 规则足以触发此错误。一种解决方法是放弃这些样式，但并不理想。然而，真正的解决办法是在正确的位置放置一个无语义的清除 div。在此处找到更多信息:

http://www.positioniseverything.net/explorer/guillotine.html