internet-explorer-8 - 如何解决 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 元素。

你知道如何解决过滤器和 PIE.htc 之间的冲突吗？

Answer 1

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

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

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

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

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