Question

我有一个简单的场景：

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>

JS

    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＆amp; iframe的IE 背景颜色是白色而不是包装器的颜色（红色）。在Firefox中它可以正常工作。

检查Chrome中的没有HEAD和BODY 节点中的元素时

另外。

当我删除css（bootstrap）时，一切正常。 不知怎的，如果我在HEAD（fe。任何css！）中写任何东西，透明度就不起作用，HEAD / BODY标签就会消失。

（我在iframe中尝试使用* {background-color：transparent}也没有成功。我想这个问题是其他问题）

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

任何人都可以帮助我吗？

Answer 1

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

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

因为您添加了bootstrap.min.css，它在正文上设置了白色背景。你刚才做了

iframe body {background-color: transparent;}

因此它是身体背景而与iframe无关。

Answer 2

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

//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>

透明度之谜：iframe在Chrome＆amp; IE中不透明，但在Firefox中

2 个答案: