在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屋!