我已经将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和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。我想这对他们来说将是相当大的工作,但是如果人们要求的话,他们可能会考虑这样做。 (也就是说,即使他们确实决定这样做,但我怀疑这样做是否会很快成为您可以在网站上使用的答案)。