我有来自 this link 的以下代码用于制作灯箱效果。它在 Firefox 和 Google Chrome 中运行良好,但在 Internet Explorer 8 中出现问题。在 IE 中,网页的所有图像和文本都在 black_overlay
上方,黑白叠加层都在背景中。请帮助解决问题。
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#666;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position:absolute;
top: 15%;
left: 320px;
width: 50%;
height: 40%;
padding: 16px;
border: 2px solid #d2d2d2;
background-color: white;
z-index:1002;
overflow: auto;
/*margin-top:100px;*/
}
HTML:
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a>
<div id="light" class="white_content">
<p>Hello</p>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay"></div>
最佳答案
删除 </div>
在 <p>Hello</p>
行之后.另见我的 jsfiddle .
关于html - CSS类显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7463914/