问题描述

我正在寻找一些替代方法：

<iframe transparency=true   ...

当我做W3C验证时，我得到错误：

Column 31: there is no attribute "allowtransparency"

如果使用这个CSS，

.iframe-trans-fix{
   opacity: 0;
   filter:alpha(opacity=0);
}

对于上面的代码段，我得到一个空白的iframe。

最佳解决思路

虽然W3C的HTML规范没有定义它，但是它有一个allowTransparency属性，所有现代浏览器(和Internet Explorer)都支持它。正如HTML5教过我们的，车应该在马之前。

假设你的主页上有这个HTML，index.html：

<html>
    <body>
        <iframe src="source.html" 
                allowTransparency="true" 
                style="background-color:lightgreen;" 
                width="400" height="200">
        </iframe>
    </body>
</html>

你的source.html看起来像这样：

<html>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
           id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
           augue et dui. </p>
    </body>
</html>

当您在浏览器中打开主页面(index.html)时，您将在iframe中看到source.html中的文本，但它将具有浅绿色背景。

(在Mac OS X和Internet Explorer 8上使用Safari，Firefox和Chrome测试，Windows XP上的Chrome)

编辑：关键是：源页面不能设置自己的背景。如果是，它会忽略透明背景。

次佳解决思路

我不知道你在这里做什么，但这应该是你正在寻找的：

iframe {
    background-color: transparent;
}

这当然是假设你想要iframe的背景是透明的。

第三种解决思路

有一种方法可以使用jQuery，如果你已经包括了jQuery文件 – 

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

将.classname更改为您的iframe的名称，或者如果没有，请将其更改为。 (从iframe中取出属性)在iframe关闭标记之后，将它放在IE9之前的浏览器中添加所需的allowTransparency标签。因为它是在IE条件语句内，它不会被W3C验证器读取。它还消除了跨浏览器兼容性和内容隐藏问题，添加了所有已经提到的CSS，如果您仍然使用最新的jQuery版本。 allowTransparency属性是以明确定义的目的创建的，因此当您只需静默插入时，就无需尝试使用CSS重新创建它。希望这有助于某人！

(此方法假定您已经有iframe {background-color:transparent}，它不适用于较旧的IE版本)

参考文献

注：本文内容整合自Google/Baidu/Bing辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。