1

我已将 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 之间的冲突吗？

4

2 回答 2

0

是的，你会在 CSS3Pie 和filter. 这是不可避免的。filter有许多与其他浏览器功能冲突的已知错误。CSS3Pie 使用 VML，听到它与filter.

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

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

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

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

于 2013-06-11T14:21:27.793 回答
0

我有一个类似的问题，我想在页面上显示两个蓝色圆圈，两者都具有不透明度。我发现最好的解决方案是使用单个蓝色像素 - 保存为具有透明度的 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，因为这更适合文本（即不会使文本不透明）。

于 2013-09-23T11:01:01.793 回答