问题描述

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

<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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。