Internet Explorer 8 Struggling With CSS Transparency

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):

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.

Tagged as: Gecko, Internet Explorer, Microsoft, Trident, WebKit