CSS：不透明度 - Div 在 IE7 中不显示？答案

【问题标题】：CSS: Opacity - Div doesn't show in IE7?CSS：不透明度 - Div 在 IE7 中不显示？
【发布时间】：2011-05-13 22:03:09
【问题描述】：

我创建了一个叠加层，用于在执行 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();

有什么想法吗？

提前致谢

【问题讨论】：

我在 ie7 中测试过，和 ie8 一样工作。

标签： css internet-explorer filter overlay opacity

【解决方案1】：

尝试以下附加 CSS：

#overlay {
    zoom: 1;
}

【讨论】：

【解决方案2】：

因为你的 div 是绝对定位的，你应该指定一个高度（不同于自动）。这可以通过将 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 sn-p as

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

【讨论】：