My issue involves an overlay div that is a child of the body tag. I want the div's background to be transparent white without using a PNG. Here is the Sass code I am using:
.my-overlay
@include opacity(0.6)
background: #fff
position: absolute
top: 0
left: 0
When this code compiles, it results in:
.my-overlay
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6;
background: white;
position: absolute;
left: 0;
top: 0;
I have also included the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
This setup works as expected in Chrome, Safari, and Firefox, however, in IE8 the div's background appears as opaque white (tested on XP/IE8/VMWare on OS X). Compatibility mode does not solve the issue.
I attempted changing 'filter' to '-ms-filter', but saw no improvement in IE8 transparency. The IE8 developer toolbar confirms that the 'filter' property is correctly applied with the desired value, and 'hasLayout' is set to -1. What could I be missing that prevents transparency from working properly in IE8?