如何解决 IE 7 和 8 中的不透明度和边界半径冲突？

Question

我已将 css 添加到 li 元素中，如下代码：

#slider1 .overview li{
    width: 70px;
    height: 70px;
    float: left;
    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius:40px;
    behavior: url(PIE.htc)
    opacity: 0.5;
    filter: "alpha(opacity=50)";
    -ms-filter: "alpha(opacity=50)";
    border: 3px solid #FFF; }

在这里我添加了 PIE.htc 文件以支持边框半径和过滤器以支持 IE7 和 IE8 的不透明度。

我的问题是当我只对 li 元素应用过滤器时，我得到了正确的不透明度。当我添加 PIE.htc 文件以支持 IE 的边框半径时，不透明度不适用于 li 元素。

您知道如何解决 filter 和 PIE.htc 之间的冲突吗？

Answer 1

是的，你会在 CSS3Pie 和 filter 之间遇到冲突。这是不可避免的。 filter 有许多与其他浏览器功能冲突的已知错误。 CSS3Pie 使用 VML，听到它与 filter 冲突我真的一点也不惊讶。

事实上，快速搜索 CSS3Pie 问题表明这是一个已知的 CSS3Pie 问题，已经记录了一段时间但尚未处理 -- 请参阅 https://github.com/lojjic/PIE/issues/46

我可以为您建议的第一个选项是简单地删除其中一个功能。我不知道圆角在这个特定元素中对您有多重要，但是通过删除对 pie.htc 的引用将其从 IE 中删除将使 filter 自行工作，因此不会发生冲突。删除filter 以保留圆角也是如此，尽管我怀疑删除不透明度设置会比圆角对网站的可用性产生更大的影响。

第二个选项是使用rgba 作为背景颜色而不是opacity。旧的 IE 版本不支持rgba 颜色，但 CSS3Pie 支持，这意味着您可以在 CSS3Pie 中完成透明效果和圆角的所有工作，这意味着您不会遇到冲突。 rgba 与普通的opacity 不同 - 因为它会使背景透明但不影响前景（即元素内的文本）。这可能很重要，在这种情况下，它可能不是一个合适的解决方案，或者它可能是您可以接受的。

我能想到的最后一个选择是询问 CSS3Pie 作者是否会考虑修复我之前链接的问题。这可能需要他们将opacity 作为 CSS3Pie 的一项功能添加到 polyfill。我想这对他们来说是一项相当大的工作，但如果人们提出要求，他们可能会考虑这样做。 （也就是说，即使他们确实决定这样做，我怀疑它是否会尽快完成以成为您可以用于您的网站的答案）。

Answer 2

我有一个类似的问题，我想在一个页面上显示两个蓝色圆圈，两个都是不透明的。我发现最好的解决方案是使用单个蓝色像素 - 保存为具有透明度的 png...

    .transparent-blue {
        background: url(../../img/transparent-blue.png);
    }

...作为背景重复，不使用与pie.htc冲突的ms过滤规则。

值得一提的是，我仅通过单独的样式表将此解决方案应用于 IE8...

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/css/compiled/ie8.css">
    <![endif]-->

在主样式表中我使用了 rgba，因为它更适合文本（即不会使文本不透明）。