透明度之谜：iframe 在 Chrome 和 IE 中不透明，但在 Firefox 中答案

【问题标题】：Transparency mystery: iframe not transparent in Chrome&IE but Firefox透明度之谜：iframe 在 Chrome 和 IE 中不透明，但在 Firefox 中
【发布时间】：2014-04-27 21:24:20
【问题描述】：

我有一个简单的场景：

http://jsfiddle.net/akosk/t2KvE/8/

HTML

<div id='base'>
    <iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe>    
</div>

<script id="content" type="text/html">
    <html>
        <head>
            <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
        </head>
        <body>                                       
            <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus architecto quasi deleniti eius praesentium non officia culpa corporis officiis perferendis laudantium placeat excepturi. Voluptatum fuga mollitia reiciendis non aliquam dolorem!</h2>              
        </body>
    </html>
</script>

    var myFrame = $("#myFrame");
    var content = $("#content").html();
    myFrame.contents().find('html').html(content);

CSS

iframe {
    z-index:0;
    height:100px;
}
#base {
    background-color:red;
    height:100px;
    z-index:-1;
}

在 Chrome 和 IE 中 iframe 的背景颜色是白色，而不是包装器的颜色（红色）。在 Firefox 中它工作正常。

另外在 Chrome 中检查元素时 iframe 中没有 HEAD 和 BODY 节点。

当我删除 css（引导程序）时，一切正常。 不知何故，如果我在 HEAD 中写入任何内容（fe.任何 css！）透明度不起作用并且 HEAD/BODY 标签消失。

（我在 iframe 中尝试使用 * {background-color:transparent} 也没有成功。我想问题是别的）

这对我来说是一个巨大的谜。

谁能帮帮我？

【问题讨论】：

标签： html css

【解决方案1】：

在您的代码中进行以下更改

//script

var myFrame = $("#myFrame");
var content = $("#content").html();
myFrame.contents().find('body').html(content);
//change html to body here there by setting the content of body

css 修复

在链接外部引导程序的行下方添加以下行

 <head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
    <style> BODY {background:none transparent !important}</style>
</head>

【讨论】：

谢谢！关键是：“.find('body')”而不是 .find('html')。但是它并不完美，因为它将链接和样式放入正文部分。所以我拆分它，先设置 head 然后设置 body：jsfiddle.net/akosk/t2KvE/57 当它在 head 元素中有内容时，我似乎无法将整个文档放入 iframe html 元素中。

【解决方案2】：

http://jsfiddle.net/t2KvE/31/
通过简化代码，我无法重现这一点。

iframe {
  height:100px;
}
#base {
  background-color:red;
  height:100px;
}

由于您添加了在主体上设置白色背景的 bootstrap.min.css。你只是这样做

iframe body {background-color: transparent;}

因此它是body背景，与iframe无关。

【讨论】：

如果我从头上移除所有东西，那么它工作正常。这就是您的代码有效的原因。尝试向 head 部分添加任何内容都会失败：[jsfiddle.net/akosk/t2KvE/58/]
这就是我要指出的。添加到 iframe 头部的引导 CSS 具有样式主体 {background: #fff;}。如果您在主 CSS（而不是 iframe）中执行 iframe body {background: transparent;} 您会覆盖它。