html - 即 : element does not move when :hover makes another element visible

Question

我在 IE 8/7 中遇到了一个奇怪的问题，我经历了 hell (来回)以达到证明该问题的最小测试用例...

考虑以下 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>

还有这段 CSS:

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

它应该做什么:在悬停时，一个额外的段落变得可见，将下一个字段集及其所有内容向下推。 (在 FF/Chrome/Safari/Opera 中运行良好)

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

在对重现问题的最小标记的令人沮丧的追求中(当我从原始代码中删除单行 CSS 时，效果消失了，但我的测试用例可以有它们并且仍然很好...... O_o)我确定至少三个玩家在这里一起工作:

1. 字段集:如果我将所有内容都放在 div 或没有字段集的表单中，一切都很好
2. position:relative:取消注释该行，瞧 - 链接跳转。
3. 背景颜色:这对我来说毫无意义，但没有它它仍然有效。

那么，问题来了(除了隐含的“WTF？”):

有人知道导致这种行为的原因吗？以及如何解决？或者至少提示我可以研究哪些已知的 IE 问题以进一步测试东西？

也许我可以想出一种方法来 flex 结构并...说...在一些额外的包装 div 或其他东西上有背景颜色，但这似乎...有点傻，无论如何，我觉得好像现在不理解这一点会让事情在未来变得非常复杂。

Answer 1

正是您对 position: relative 的评论帮助我解决了这个问题。这让我想到 hasLayout!如果您确保 form 和 fieldset 也设置了布局(只是将其提供给 #link 就造成了问题)，问题似乎就解决了。一种(众多)方式:

form, fieldset {zoom: 1}

See the working fiddle .

顺便说一句:您的代码中不应该有两个 #hover id。那应该设置为一个类(也许这只是您示例中的一个错误，但我想指出它)。