This is driving me crazy – I have been trying to get opacity working in IE8 (and IE < 7), so I’ve added the IE-specific css-property -ms-filter (and filter for the older IEs). This is working great running on localhost using Visual Studio 2010’s built in development server, or just opening the html file from disk.
However, when viewing it (or any other page using filter such as http://www.quirksmode.org/css/opacity.html) I don’t get the opacity – just a solid color.
I’ve made a demo here http://jsfiddle.net/3nvN9/9/ – the div appears solid black to me when viewing it in jsFiddle, but if I take the same code (which is why I kept it all in the html) and view it from localhost or disk I can see the text through the div.
Here is the full code for the sample page:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
top: 0;
height: 150px;
width: 150px;
background-color: black;
opacity: .3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity = 30);
}
</style>
</head>
<body>
<p>Can you see me?</p>
<div></div>
</body>
</html>
Writing this question I realised it had to have something to do with IE’s security settings – especially since I’m on a company network which is probably quite locked down.
Going through the settings I finally found that it was the Binary and Script Behaviors setting that caused the problem. Since the
filters are part of ActiveX they get disabled as well.After finding the setting I tried googling it and found this page which explained it nicely. http://paintincode.blogspot.de/2012/06/css-opacity-ie-filter-binary-and-script.html. I only wish I would have been able to find it before knowing the name of the setting. =)