Internet Explorer 8 Struggling With CSS Transparency

August 22, 2009

Oh, this reminds me of the days of transparent PNG troubles. Using CSS alpha opacity seems to break Internet Explorer 8.0:

.hovers {
        opacity: .6;
        -moz-opacity: .6;
        filter: alpha(opacity=60);
}
.hovers:hover {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
}

This is how images styled with this CSS renders in the most popular browsers (for the real styling, hover over the “Follow” icons in the top of the sidebar to the right):

Google Chrome

Safari

Mozilla Firefox

Internet Explorer

Maybe I’m just doing it wrong? I’d like to know, since I don’t want to choose between awesome hovers and looking shady to 20% of the site’s visitors (I just realized the stats have changed quite a bit: Firefox 62.38%, Internet Explorer 20.25%, Chrome 6.52%, Safari 4.14%, Opera 4.09%).

Update: Turns out filter: alpha isn’t a CSS standard, but is in W3C’s CSS3 recommendation.