Internet Explorer's problem with css :after pseudo element when using opacity filter
I am drawing a pointed triangle at the bottom of the div using :after pseudo-element. It works as designed. However, when I add the开发者_如何学运维 opacity filter for the div, it stops working in IE (I am testing it on IE8). It works just fine in FF, Chrome, and Safari.
Here is HTML:
<html>
<head></head>
<body>
<div id="demo"></div>
</body>
</html>
Here is CSS:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 10px;
}
Run it in IE and see the result that looks like image here: link text
Now add IE opacity filter: to the #demo so it looks like this and run it in IE again:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
filter: alpha(opacity=50);
}
Notice that opacity filter works but the triangle at the bottom of the div disappeared. The same thing works just fine in every other browser (the only difference is that you need to use "opacity: 0.5" instead of IE specific "filter: alpha(opacity=50);")
Does anybody know why this is happening, and how to get around it?
Thanks.
An object must have layout for the filter to render. Pseudoelement :after don't have layout. Sorry to say that.
The problem is that IE Visual Filters (like the alpha one you are using) were developed before :after and :before were implemented in IE.
You should wrap the #demo div with another div container, and put the opacity on that (making sure the container div has layout).
Alas, it is the only way to do ti
加载中,请稍侯......
精彩评论