元素不会出现在IE7中,直到我通过Developer工具栏编辑它。

时间:2022-02-14 21:12:34

This one has me stumped - I have an element on my page with an absolute position, inside of a container with a relative position. In all browsers except IE7, it appears in the correct spot with no issues at all.

这一个让我很为难——我的页面上有一个绝对位置的元素,在一个具有相对位置的容器内。除了IE7,在所有浏览器中,它都出现在没有问题的正确位置。

In IE7, the element doesn't appear until I add or edit any of its CSS properties in the Attributes tab of the Developer Toolbar (even properties that have nothing to do with its visibility or position, like color). Once I do so, it then appears correctly - and even remains visible if I delete the property that I just added (or undo the modification)!

在IE7中,直到我在Developer Toolbar的Attributes选项卡中添加或编辑它的CSS属性(甚至与它的可见性或位置无关的属性,比如颜色)时,元素才会出现。一旦我这样做了,它就会正确地出现——如果我删除刚才添加的属性(或者取消修改),它仍然是可见的。

This must be an IE7-specific display bug, but I can't figure out a way around it - I've thrown float, zoom, etc. at it to no avail.

这一定是一个ie7特有的显示bug,但我想不出一种方法——我抛出了float、zoom等,但没有效果。

2 个解决方案

#1


3  

I fixed this by moving the disappearing element one level deeper, into another child element. Since the child element is floated, but does not have a position, the disappearing element is still positioned relative to the parent element, which is what I want - but for some reason this also causes it to be visible in IE7, like it's supposed to be.

我把消失的元素移到另一个元素中,把它移到另一个子元素中。由于子元素是浮动的,但是没有位置,正在消失的元素相对于父元素仍然处于相对位置,这正是我想要的——但是出于某种原因,这也使它在IE7中可见,就像它应该是一样的。

This is what I had that caused the element to disappear (not the real IDs):

这就是导致元素消失的原因(不是真实的id):

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

This is what makes it appear:

这就是它出现的原因:

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

Floating #parent and giving it a width (the same two properties that #child has) didn't work, though - I have to use a separate child element. Totally bizarre, but figured I'd post this in case anyone else runs into the same problem!

浮动#父进程和给它一个宽度(与#child的两个属性相同)没有工作,但是-我必须使用一个单独的子元素。非常奇怪,但我想我应该把它张贴出来以防其他人遇到同样的问题!

#2


0  

Isn't it weird how IE developer tool bar triggers it to be visible?!

IE开发者工具栏是如何触发它的可见性的?

I fixed it by instead of using absolute positioning for the child element using relative positioning with a negative margin-left to position the element. Not ideal as it makes the design more fragile, but my only option at the time.

我把它固定下来,而不是使用相对定位的子元素的绝对定位,用一个负的margin-left来定位元素。这并不理想,因为它使设计更加脆弱,但我当时唯一的选择。

#1


3  

I fixed this by moving the disappearing element one level deeper, into another child element. Since the child element is floated, but does not have a position, the disappearing element is still positioned relative to the parent element, which is what I want - but for some reason this also causes it to be visible in IE7, like it's supposed to be.

我把消失的元素移到另一个元素中,把它移到另一个子元素中。由于子元素是浮动的,但是没有位置,正在消失的元素相对于父元素仍然处于相对位置,这正是我想要的——但是出于某种原因,这也使它在IE7中可见,就像它应该是一样的。

This is what I had that caused the element to disappear (not the real IDs):

这就是导致元素消失的原因(不是真实的id):

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

This is what makes it appear:

这就是它出现的原因:

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

Floating #parent and giving it a width (the same two properties that #child has) didn't work, though - I have to use a separate child element. Totally bizarre, but figured I'd post this in case anyone else runs into the same problem!

浮动#父进程和给它一个宽度(与#child的两个属性相同)没有工作,但是-我必须使用一个单独的子元素。非常奇怪,但我想我应该把它张贴出来以防其他人遇到同样的问题!

#2


0  

Isn't it weird how IE developer tool bar triggers it to be visible?!

IE开发者工具栏是如何触发它的可见性的?

I fixed it by instead of using absolute positioning for the child element using relative positioning with a negative margin-left to position the element. Not ideal as it makes the design more fragile, but my only option at the time.

我把它固定下来,而不是使用相对定位的子元素的绝对定位,用一个负的margin-left来定位元素。这并不理想,因为它使设计更加脆弱,但我当时唯一的选择。