0

我有以下代码，其中我在 iframe 中放置了一个用于阻止点击事件的链接。

 <div id="IframeWrapper" style="position: relative;">
    <div id="iframeBlocker"></div>
     <iframe  id="iframewebpage"  runat="server"></iframe>
    </div>

和 CSS

  #iframeBlocker {        
    background:none transparent ;
    background-color:White;
    bottom: 0px;
    color: White;      
    filter:alpha(opacity=10);
    opacity: 0.1;            
    display: block;            
    left: 0px;     
    position: absolute;
    right: 0px;
    top: 0px;      
    z-index: 1040;
     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    }

我的问题是。我的 div 不能同时使用不透明度和阴影。如果我使用 css ie 代码来启用阴影，它不需要不透明度。

在 IE 中对 div 使用阴影和不透明度的任何解决方法？

4

4 回答 4

2

rgba()如果适合您的需要，也许可以尝试使用不透明度来代替。

#iframeBlocker { 
   background:rgba(255, 255, 255, 0.1);   
}
于 2013-08-30T11:33:08.053 回答
2

IE8 对不透明度或阴影都没有很好的支持。

这两个特性都通过-ms-filter/filter样式得到支持，就像你已经在你的代码中一样，但它不符合标准，而且不是特别好；filer有很多错误和怪癖，使它们难以使用。

理论上，如果你想使用多个filter样式，你需要将它们组合成一个声明：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)
            progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

（另请参阅：IE 中的多个 CSS 过滤器）

@insertusernamehere 的答案几乎是正确的，但他错过了样式周围的引号，并且它们之间不需要逗号；只是一个空间。

如果这对你有用，那么好消息。但是，您仍然需要小心，因为 IE 支持的各种过滤器样式确实存在很多已知问题，并且已知在组合使用时会产生一些奇怪的结果。如果你要走这条路，你需要仔细测试。

值得一提的是流行的 CSS3Pie 库，它填充了各种 CSS3 特性，包括box-shadow. 值得注意的是，他们目前不支持opacity，其原因主要是因为他们很难将其与他们支持的其他功能一起工作。

所以毕竟，我最后的建议是放弃 IE8 中对阴影的要求。最终，它只是让人眼前一亮，因此如果它丢失了，它不会影响您网站的可用性，而且它会给您带来很多麻烦，试图让它正常工作。

于 2013-08-30T12:25:57.483 回答
1

您不能有多个 CSS 过滤器规则，但您可以在单个规则中列出多个过滤器：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)
            progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

阅读 MSDN 上的更多信息：使用视觉过滤器和过渡创建多媒体效果。

于 2013-08-30T11:33:38.873 回答
0

我终于找到了路。相当简单。

刚刚添加了用于向 IE8 添加阴影的 css 到封闭的 div “Iframewrapper”

  #IframeWrapper {

        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    }

因此，与其在同一个 div 中同时添加不透明度和阴影的 css，不如在它们位于不同的 div 中时起作用。

于 2013-08-30T12:15:05.627 回答