Html 当：hover使另一个元素可见时，IE:element不移动

我在IE 8/7中遇到了一个奇怪的问题，我经历了地狱般的痛苦（又回来了），最终得到了一个演示该问题的最小测试用例

请考虑以下一点HTML：

<form id="hover-test">
  <fieldset>
    <div id="hover">
       <p>always visible</p>
       <p class="hidden">Visble only on hover</p>
    </div>  
  </fieldset>

  <fieldset>
    <a href="#" id="link">Please jump</a>
  </fieldset>
</form>

它应该做什么：悬停时，另一个段落将可见，并向下推下下一个字段集及其所有内容。（适用于FF/Chrome/Safari/Opera）

它在IE 7/8中的作用：段落变为可见，按下以下字段集。然而，由于我无法理解的原因，链接保持固定

在一次令人沮丧的追逐中，我发现至少有三个玩家在这里一起工作：

字段集：如果我将所有内容都放在div中或没有字段集的表单中，那么一切都很好

position:relative：取消注释该行，然后voilálink跳转

背景色：这对我来说毫无意义，但如果没有它，它就可以工作 所以，这里有一个问题（除了隐含的“WTF？”）：

有人知道是什么导致了这种行为吗？如何解决呢？或者至少是关于我可以进一步测试哪些已知IE问题的提示

---

也许我能想出一个方法来弯曲结构，然后…说。。。有一些额外的包装div或什么的背景色，但这似乎。。。有点傻，不管怎么说，我觉得如果现在不理解这一点，事情可能会变得非常复杂。

是你对

位置：relative

的评论帮助我解决了这个问题。这标志着我认为

有布局

！如果您确保

表单

和

字段集

也设置了布局集（只需将其交给创建问题的

#链接

），则问题似乎已得到解决。一种（多种）方法：

表单，字段集{zoom:1}

---

顺便说一句：你的代码中不应该有两个

#hover

id。这应该设置为一个类（也许在您的示例中这只是一个错误，但我想指出它）。

一个段落应该是

“display:block”

谢谢。必须是使用span/a而不是p进行测试时产生的残留物。我以前确实试过hasLayout，但不是我把它放错元素了，就是忽略了什么，或者我不知道，但我排除了这种可能性，没有再尝试。谢谢你把我指回到我的老朋友身边。哦，双悬停是一个输入错误。@Louise——您可能忽略了它需要在父元素和父元素上设置（

form

和

fieldset

）；仅仅把它放在一个上面并不能解决我的问题。

form                 { background-color:#f5f5f5; }
.hidden              { display:none; }
#hover:hover .hidden { display:block; }
#link                { position:relative; }