透明背景在IE9中无法正常工作
[英]Transparent background is not working correctly in IE9
问题描述
基本上它是一个灯箱演示。 代码来自这里。 我想点击“显示面板”链接，然后弹出一个表格。 它在Firefox中运行良好，但在IE9中却出错。
HTML代码非常简单：
<body>
<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->
</body>
CSS：
<style type="text/css">
#lightbox {
display:none;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
background-color: #FFCC66;
}
#lightbox-panel {
display:none;
position:fixed;
top:180px;
left:50%;
margin-left:-200px;
width:450px;
border:2px solid #CCCCCC;
z-index:1001;
background-color: #999900;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.show-panel {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
}
</style>
JQuery代码：
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
})
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
在firefox中的效果：
IE9中的效果：
您不仅可以看到透明背景，还可以看到灯箱的位置不正确。
感谢帮助。
整个代码：
https://skydrive.live.com/?cid=03a8bb9eaeeff1db#cid=03A8BB9EAEEFF1DB&id=3A8BB9EAEEFF1DB!234
3 个解决方案
解决方案1
1 已采纳 2012-08-04 21:13:17
问题
正如Jashwant所说，这可能是一个doctype问题。 这就是问题所在。 一旦我在<html>标签前面添加了HTML 5 doctype，它就被修复了。
<!DOCTYPE html>
请记住，IE并不像其他浏览器那样聪明。 所以你应该使用正确的网页设置：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
它似乎确实在这个JsFiddle上工作。
我确实看到你说它也适合你身边的JsFiddle。 那么，你可以将你的整个HTML发布在像pastebin这样的pasteTool吗？ 这将使修复这个更容易。
有一点，我想指出的是，你的灯箱垂直居中的方式并不均匀。
灯箱的宽度为450px因此对于margin-left你想要的一半。 450的一半是225，所以你的新margin-left是-225px。
这将使它完美地位于中心。 我也喜欢使用JavaScript来获取对象的宽度并在那里进行数学运算。 这将使页面加载更长一点，因为它必须做更多的工作，但我认为它工作得很好。
这是一个有点偏离主题，考虑到你，灯箱似乎没有在那个HTML页面上工作，但我认为这也可能有用。 确保再次检查HTML。 可能存在IE无法修复的问题，而谷歌浏览器等其他浏览器可以解决这个问题。
哦，如果你想水平居中灯箱你可以使用相同的方法，你只有一半的高度，并使用在margin-top的负面形式
解决方案2
1 2012-08-04 21:24:21
它可能是doctype问题。
把它放在你的<html>之前
<!DOCTYPE html>
也，
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
在head 。
解决方案3
0 2012-08-04 21:05:36
它似乎对我有用。 你是积极的还有其他原因导致这个问题吗？
我建议也设置html和body标签的高度和宽度。 我不确定这是不是原因，但我认为这会有所帮助。
html, body {
height:100%;
width:100%;
}
我已经创建了一个示例，其中包含您在html文件中提供的内容，它似乎正常工作。 我想我们需要更多信息。 这些是我放在html文件中的内容。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#lightbox {
display:none;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
background-color: #FFCC66;
}
#lightbox-panel {
display:none;
position:fixed;
top:180px;
left:50%;
margin-left:-200px;
width:450px;
border:2px solid #CCCCCC;
z-index:1001;
background-color: #999900;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.show-panel {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
}
</style>
</head>
<body>
<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
</script>
</body>
</html>
当我将我的测试与你给我们的测试进行比较时，你就错过了doctype。 一旦我添加了doctype，一切正常。
jQuery .is（'：hover'）在IE9中无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.