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

Internet explorer 8 如何解决IE 7和IE 8中的不透明度和边界半径冲突?,internet-explorer-8,internet-explorer-7,opacity,css,Internet Explorer 8,Internet Explorer 7,Opacity,Css,我已将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(op

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

是的,CSS3Pie和
过滤器之间会出现冲突。那是不可避免的<代码>过滤器
有许多已知的错误,与其他浏览器功能冲突。CSS3Pie使用VML,听说它与
过滤器
冲突,我并不感到惊讶

事实上,对CSS3Pie问题的快速搜索表明,这是CSS3Pie的一个已知问题,已经记录了一段时间,但尚未处理——请参阅

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

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


我认为最后一个选择是向CSS3PIE的作者询问他们是否会考虑修复我之前联系过的问题。这可能需要他们添加
不透明度
,作为CSS3Pie到polyfill的一项功能。我想这对他们来说是相当大的一部分工作,但是如果人们要求的话,他们可能会考虑这样做。(也就是说,即使他们真的决定这么做,我怀疑这是否会很快成为你的网站可以使用的答案)。

我遇到了一个类似的问题,我想在一个页面上显示两个蓝色圆圈,都是不透明的。我发现最好的解决方案是使用一个蓝色像素-保存为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,因为它更适合于文本(即不会使文本不透明)。

您可以将其添加到fiddle上吗?对于这些古老的恐龙浏览器,不要太担心外观。如果网站功能正常,看起来还可以,那么就把它留在那里。不要用这些小小的美学细节来给自己压力。你能不能在这上面再多说一点。请看Sorry@axrwkr-我有点快地回答了这个问题。希望这次扩张能有所帮助。