在IE8中不透明的问题 [英] Problem with opacity in IE8
问题描述
< div id =overlay>
< / div>
< div id =imgcontainer>
< div>
< div id =source>
< / div>
< / div>
< / div>
在IE I中设置（使用jQuery）#source元素为0可以看到#overlay的背景，而不是#imgcontainer> div，但为什么？
有一个javascript代码：
$（function（）{
$（＃source ）.css（{
opacity：0，
}）;
$（＃overlay）。css（{
width：$（window）.width ），
height：$（window）.height（），
display：block，
opacity：0.6
}）;
$（＃imgcontainer）。css（{
zIndex：2，
position：fixed，
opacity：1，
left：0，
right：0，
top：100px，
display：block
}）;
}）;
您可以试试 jsFiddle 。
UPD：
经过一些实验后，我找到了解决方案。这真的是html \ css问题，所以我做了一些代码重构并删除了jQuery标签。想象一下，我们有这样的html murk：
< body>
< div id =d1>
< div id =d2>
< div id =d3>
< / div>
< / div>
< / div>
< / body>
和css样式：
body {
background-color：＃c8c8c8;
}
＃d1 {
background-color：＃6c0922;
width：500px;
border：1px纯黑色;
filter：alpha（opacity = 100）;
}
＃d2 {
background-color：＃146122;
width：350px;
margin：20px auto;
border：1px纯黑色;
}
＃d3 {
background-color：＃0080c0;
height：100px;
margin：10px 65px;
filter：alpha（opacity = 0）;
zoom：1;
}
首先看一切正常，我们期望 ＃d3 变得透明，我们可以看到＃d2 背景（深绿色）。但是在IE7中不是那么简单。在IE中，我们可以通过＃d2 和＃d1 来看到body！（灰色）背景。你猜对了＃d1 中的所有魔法。当我们删除 filter：alpha（opacity = 100）; 所有工作都正常。
你可以问 - 但为什么你设置opacity = 1到现在不透明的元素？我不知道 ：）。可能出于某种原因，您应该使用此行为。非常有趣和意外的行为。
您可以在 jsFiddle 。
我有同样的问题。我做了大量的搜索和阅读，发现IE8不使用其他浏览器使用的不透明度的CSS。这是我用于IE8的CSS：
＃loading-div-background {
display：none;
位置：绝对;
top：0;
剩下：0;
背景：灰色;
宽度：100％;
身高：100％;
/ *下两行IE8 * /
-ms-filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 75）;
filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 75）;
}
然而，它仍然没有与position：fixed，但是一旦我放在位置：绝对开始工作。
I try to solve a problem that appears in IE8. Html is very simple:
<div id="overlay">
</div>
<div id="imgcontainer">
<div>
<div id="source">
</div>
</div>
</div>
When I set (using jQuery) opacity of "#source" element with "0" in IE I can see the background of #overlay, not #imgcontainer > div, but why? There is a javascript code:
$(function(){
$("#source").css({
opacity: "0",
});
$("#overlay").css({
width: $(window).width(),
height: $(window).height(),
display: "block",
opacity: "0.6"
});
$("#imgcontainer").css({
zIndex: 2,
position: "fixed",
opacity: "1",
left: "0",
right: "0",
top: "100px",
display: "block"
});
});
You can try live example on jsFiddle.
UPD:
After some experiments I found the solution. It's really html\css issue, so I made some refactoring of code and remove jQuery tag. Imagine we have such html murk up:
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
</body>
and the css styles:
body {
background-color: #c8c8c8;
}
#d1 {
background-color: #6c0922;
width: 500px;
border: 1px solid black;
filter: alpha(opacity = 100);
}
#d2 {
background-color: #146122;
width: 350px;
margin: 20px auto;
border: 1px solid black;
}
#d3 {
background-color: #0080c0;
height: 100px;
margin: 10px 65px;
filter: alpha(opacity = 0);
zoom: 1;
}
At first look all is ok, we expect that #d3 become transparent and we can see #d2 background(dark green). But not so simple in IE7\8. In IE we can see body!(grey) background through #d2 and #d1. All magic in #d1 you guessed it. When we remove filter: alpha(opacity = 100); all work correctly.
You can ask - but why you set opacity = 1 to the element which is non-transparent now? I don't know :). May be in some reason you should use this behavior. Very interesting and unexpected behavior.
You can play with this example in jsFiddle.
I had the same issue. I did a lot of searching and reading and found IE8 doesn't use the css for opacity other browsers use. Here is my CSS that I used for IE8:
#loading-div-background {
display:none;
position:absolute;
top:0;
left:0;
background:gray;
width:100%;
height:100%;
/* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}
However, it still didn't work with position:fixed, but once I put in position:absolute it started working.
这篇关于在IE8中不透明的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
