mik*_*epr 11 css internet-explorer css-position parent-child opacity
在大多数浏览器中,当html元素仅部分不透明时,其子元素"继承"此不透明度.(这是不太继承 - 更准确,图像整体组装,其中包括母公司及其子递归,然后将不透明度应用于整个事情.)
在IE8中(我也假设IE的早期版本),这并不总是与不透明度有关.如果子元素的位置为:static(默认情况下,如果没有指定位置),那么它就像我上面描述的那样工作.但是,似乎情况是,如果将位置设置为其他任何内容(例如,绝对或相对),则子元素是完全不透明的.
我想知道如何使不透明度正确地影响父元素和子元素,但仍然保持子元素的位置:绝对;
这是一个问题的例子.下面的代码应该是一个半透明的灰色框,在一个垂直的红色条顶部有一个半透明的蓝色周围区域.在Firefox,Chrome等上,这是实际看到的.在IE8上,蓝色框是正确半透明的,但灰色部分是不透明的.
<!doctype html>
<html>
<head>
<style>
div.parentElem
{
background-color:#0000ff;
position: absolute;
left:75px;
top:75px;
width:300px;
height:225px;
opacity:0.5;
filter:alpha(opacity=50);
}
div.childElem
{
background-color:#808080;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
div.redBar
{
position: absolute;
left:150px;
top:50px;
height:350px;
width:25px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="redBar"></div>
<div class="parentElem">
<div class="childElem"></div>
</div>
</body>
</html>
显然,这只是一个玩具示例 - 我可以有一个蓝色边框和灰色背景的div,以达到预期的效果.在真实场景中,我正在分层几个不同的div,每个div都有一个png背景图像来动态构建图像.
我的第一个尝试的解决方法是通过将子项上的过滤器设置为alpha(opacity = 50)来对父项和子项应用不透明度; 或者只是设置过滤器:inherit;.这不能达到预期的效果,因为它在它上面形成一个半透明的灰色矩形的半透明蓝色矩形.中间的空白区域最终是半透明的蓝色灰色,而它应该是半透明的灰色.同样,它不能使元素兄弟姐妹.在对任何事物应用任何透明度之前,任何解决方案都需要组合两个图像.
在我的研究中,我发现了一些建议,即应用zoom:1; 或者浮动:无; 内部元素可能会解决问题,但对我来说都没有用.
我最终的解决方法是给子元素位置:static.这是一种丑陋的解决方案,但是我要将它应用于上面的示例是将子元素的样式更改为:
div.childElem
{
background-color:#808080;
position:static;
margin-left:10px;
margin-right:10px;
height:205px;
margin-top:10px;
}
这是一种丑陋的解决方案,因为这意味着我必须知道物体的高度.另外,在我正在编写几个不同的png的实际情况中,我希望它们是逻辑兄弟,我必须将它们全部放在嵌套的父子孙子等中.关系.它还可以防止我添加任何文本元素,除了在堆栈的最顶部(最里面的div),而不会弄乱定位.但它确实有效,并且在所有浏览器中看起来都一样.
有没有办法避免这种可怕的解决方法,并且不透明度正确影响子元素而不使位置静态？谢谢!
小智 7
div.parentElem *{filter:inherit;}
看到:
http://seanmonstar.com/post/709013028/ie-opacity-ignores-positioned-children
我能够找到一种方法将不透明度正确应用于绝对定位的儿童。当我没有给页面提供任何文档类型时，会正确应用不透明度。实际上，因为这会迫使浏览器进入怪异模式，所以它通常不是一个可行的解决方案。