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

【问题标题】：IE8/9 + Quirks mode opacity not workingIE8/9 + Quirks 模式不透明度不起作用
【发布时间】：2013-02-16 08:32:01
【问题描述】：

我正在开发 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 不透明度在元素上没有宽度/高度时不起作用，我的高度基于 % 并且没有宽度，因为我正在使用媒体查询

【问题讨论】：

我很确定 -ms-filter 在怪癖模式下工作...
只是想知道，为什么你甚至需要支持怪癖模式？
我刚刚在IE8 Quirks（IE8 with Browser Mode: IE8; Document Mode: Quirks）中测试了quirksmode.org/css/opacity.html（拟合站点名称），该页面上的过滤测试段落是透明的。
@jdwire 在仅适用于/强制执行 Quirks 模式的企业应用程序之上开发。如果可以的话就不会。

标签： html css internet-explorer internet-explorer-9 quirks-mode

【解决方案1】：

我还必须支持 quirks 模式和没有 JQuery，但对我来说，我需要使用“display: inline-block” 而不是“display: inline”。

以下内容对我有用：

"显示：inline-block；不透明度：0.5；过滤器：alpha(opacity = 50)；";

【讨论】：

+1。这是对我有用的答案。不想为我们应该能够在 CSS 中做的事情引入 jQuery 函数

【解决方案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');
        });
    });
});

【讨论】：

我想即使在企业压力之下，你也总是可以依靠 jQuery。