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和它相同，我也插入高度：auto，仍然没有快乐。

我正在使用jquery来显示和隐藏它所以，但这不是问题，因为我删除了显示：无，我没有看到div应该超过其余内容的顶部

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

有什么想法吗？

提前致谢

Answer 1

由于你的div位于绝对值，你应该指定一个高度（不同于auto）。这可以声明高度：100％到#overlay，然后在打开叠加层时html, body { height: 100% }和关闭叠加层时html, body { height: auto };

另一种（更好的）方法是通过javascript（例如document.body.offsetHeight）以恐怖方式计算身体元素的高度，然后将#overlay指定为高度

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

这将在你的jQuery片段中写成

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

Answer 2

尝试以下额外的CSS：

#overlay {
    zoom: 1;
}

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

2 个答案: