在我通过开发人员工具栏进行编辑之前,元素不会出现在IE7中

Question

这个让我难过 - 我的页面上有一个绝对位置的元素,在一个相对位置的容器内.在除IE7之外的所有浏览器中,它出现在正确的位置,完全没有问题.

在IE7中,直到我在开发人员工具栏的"属性"选项卡中添加或编辑其任何CSS属性(即使与其可见性或位置无关的属性等color),该元素才会出现.一旦我这样做,它就会正确显示 - 如果我删除刚刚添加的属性(或撤消修改),甚至仍然可见!

这必须是一个IE7特定的显示问题,但我不能想出办法解决它-我已经抛出float,zoom等它都无济于事.

Answer 1

我通过将消失的元素更深一层移动到另一个子元素中来修复此问题。由于子元素是浮动的，但没有位置，消失的元素仍然相对于父元素定位，这就是我想要的 - 但由于某种原因，这也导致它在 IE7 中可见，就像它应该的那样是。

这就是我导致元素消失的原因（不是真实的 ID）：

<div id="parent" style="position: relative;">
  <div id="disappear" style="position: absolute; left: -8px; top: -17px;>This element disappears</div>
</div>

这就是它出现的原因：

<div id="parent" style="position: relative;">
  <div id="child" style="float: left; width: 340px;">
    <div id="disappear" style="position: absolute; left: -8px; top: -17px;">Now this element appears</div>
  </div>
</div>

不过，浮动#parent并赋予它width（具有相同的两个属性#child）不起作用 - 我必须使用单独的子元素。完全奇怪，但我想我会发布这个以防其他人遇到同样的问题！