0

我在 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>

这一点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. 位置：相对：取消注释该行和瞧 - 链接跳转。
  3. 背景颜色：这对我来说毫无意义，但没有它它可以工作。

所以，这是一个问题（除了隐含的“WTF？”）：

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

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

4

1 回答 1

2

是您对position: relative帮助我解决问题的评论。这让我思考hasLayout！如果您确保两者都设置form并且fieldset还设置了布局（只需将其提供给#link创建的问题），则该问题似乎已解决。一种（多种）方式：

form, fieldset {zoom: 1}

见工作小提琴。

顺便说一句：你的代码中不应该有两个#hoverid。那应该设置为一个类（也许这只是你的例子中的一个错误，但我想注意它）。

于 2012-07-13T17:12:31.157 回答