IE8/9 + Quirks mode opacity not working

Question

I'm developing on quirks mode (argh...), and added opacity on some icons (no opacity when hovered), but it will not work in IE8/9 + Quirks.

    .icons {
      display: inline;
      height: auto !important;
      height: 100%;
      margin: 0 1%;
      position:relative;
      zoom: 1;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: 0.5;
    }

    .icons:hover {
      zoom: 1;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }

Here is my jsfiddle: http://jsfiddle.net/for3v3rforgott3n/C3atq/

JSFiddle looks terrible in Quirks mode so it's a bit hard to show this... I read somewhere that IE9 opacity doesn't work without a width/height on the element, my height is % based and don't have a width because I am using media queries

Answer 1

Still not sure exactly what the problem is, but I resolved it with jQuery:

$(function() {
    $('div.icons img').css('opacity', '0.6');
    $('div.icons img').hover(function(){
        $(this).css('opacity', '1.0');
        $('div.icons img').mouseout(function(){
            $(this).css('opacity', '0.6');
        });
    });
});

Answer 2

I also have to support quirks mode and without JQuery, but for me, I needed to use "display: inline-block" as opposed to just "display: inline".

The following worked for me:

"display: inline-block; opacity: 0.5; filter: alpha(opacity = 50);";