CSS:Opacity - Div 在 IE7 中不显示？

Question

我创建了一个叠加层，用于在执行 ajax 请求时显示。在 Firefox 中效果很好!但是在 IE7 中我看不到 Div。

我的 div 很简单，它是 Body 之后的第一个元素

<div id="overlay">
   &nbsp;
</div>

我的CSS在这里

#overlay {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
display:none;
}

我认为这可能与大小有关，因为我在 div 中放置了一些文本，但我在 IE7 上看不到它，但我在 firefox 上看到了。

有谁知道它在哪里不起作用，我有点不知所措:-)

我尝试删除 display:none 和它一样，我也插入 height:auto 但仍然没有快乐。

我正在使用 jquery 来显示和隐藏它，但这不是问题，因为我删除了 Display:none 并且我没有看到应该位于其余内容之上的 div

 $("#overlay").show();

有什么想法吗？

提前致谢

Answer 1

因为你的 div 是绝对定位的，你应该指定一个高度(不同于 auto)。这可以通过声明 height:100% 到 #overlay 来完成，然后在打开叠加层时声明 html, body { height: 100% } 和 html, body { height: auto } 关闭覆盖时)；

另一种(更好的)方法是通过 javascript(例如 document.body.offsetHeight)动态计算 body 元素的高度，然后将高度分配给#overlay

document.getElementById('overlay').style.height = document.body.offsetHeight + 'px';

这将在您的 jQuery 片段中写成

$("#overlay").height($('body').height()).show();