CSS 过滤器 - 有时有效，有时无效？

Posted 2023-03-06

【中文标题】CSS 过滤器 - 有时有效，有时无效？

【英文标题】：CSS filters - sometimes working, sometimes not?

【发布时间】：2011-01-27 02:14:40

【问题描述】：

我快要把头发拉出来了。

这里有一块功能完善的 CSS：

#admin .block.mode.off

    opacity: 0.25;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);

同时... Internet Explorer 8 并不关心我在这里的过滤器声明：

#admin .drop .tabs

    margin-bottom: 12px;

#admin .drop .tab

    margin-right: 4px;

#admin .drop .tab.off

    cursor: pointer;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

#admin .drop .tab.off:hover

    text-shadow: 0px 0px 4px #fff;

#admin .drop .tab.on

    cursor: default;
    text-shadow: 0px 0px 4px #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#fff, strength=4)";
    filter: progid:DXImageTransform.Microsoft.Glow(color=#fff, strength=4);

我的文档显示在 IE8 标准中，我假设开发人员工具是一大堆金枪鱼，因为功能块在其 CSS 选项卡中显示为：

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25); opacity: 0.25

有人有什么想法吗？

【参考方案1】：

根据this answer，你应该尝试给#admin .drop .tab hasLayout。我通常使用zoom:1 执行此操作但看起来 IE8 不再允许该触发器 hasLayout 了，我们应该使用height:1%（或any height declaration other than auto）。

【讨论】：

height:1% 不起作用，但您提供的链接有 display:inline-block ，这很有效。谢谢:)

很高兴知道这一点。根据微软的说法，IE8 甚至不需要这种黑客攻击，而且我发现在线更新报告的方式非常少。