Question

我正在开发quirks模式（argh ...），并在某些图标上增加了不透明度（悬停时没有不透明度），但它在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;
    }

这是我的jsfiddle： http://jsfiddle.net/for3v3rforgott3n/C3atq/

JSFiddle在Quirks模式下看起来很糟糕，所以有点难以表现出来...... 我在某处读到IE9不透明度在元素没有宽度/高度的情况下不起作用，我的高度是基于％而且没有宽度因为我使用媒体查询

Answer 1

我还必须支持quirks模式和而不用 JQuery，但对我来说，我需要使用＆＃34; display：inline-block＆＃34;而不仅仅是＆＃34;显示：内联＆＃34;。

以下对我有用：

＆＃34; display：inline-block;不透明度：0.5; filter：alpha（opacity = 50）;＆＃34 ;;

Answer 2

仍然不确定问题究竟是什么，但我用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');
        });
    });
});

IE8 / 9 + Quirks模式不透明度不起作用

2 个答案: