Question

在我的html页面中，我有一个标题，其位置是固定的。在页面的内容或正文中，我有一个iframe来显示YouTube视频和其他DIV标签。在其他浏览器，如chrome，Morzilla等标题后面的所有内容都可以正常工作!!。

但是在IE（IE 11）中，只有iframe中的youtube视频滚动到标题上方/上方。如何让它在IE中的标题后面滚动。

这是代码

CSS

#header { position: fixed; background-color: #ffffff; margin-top: -18px; z-index: 10; width: 100%; } iframe { background-color:transparent !important; z-index: -1; }

html（php page）

<div style="text-align:center;padding:20px;font-size:16px ; z-index: -1;">
 <div>
        <iframe  " width="320" height="247" src="http://www.youtube.com/********" frameborder="0" allowfullscreen></iframe>
            </div>
            </div>

http://jsfiddle.net/Rq25Q/

Answer 1

尝试在iframe的src属性末尾添加?wmode=opaque 比如<iframe " width="320" height="247" src="http://www.youtube.com/abcd?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Answer 2

我试图重现你想要的东西，但我在IE 11中找不到任何错误。

.header {
  position: fixed;
}

这是一个jsfiddle：http://jsfiddle.net/nJBy9/

所有内容都滚动在标题后面，效果很好。

你能解释一下你的问题是什么吗？

Answer 3

您需要确保iframe的z-index小于标题的z-index：

.header {
   z-index: 10;
} 
iframe {
  z-index: 1
}

iframe在IE 11中滚动固定标题，如何使其在标题下方/后方滚动？

3 个答案: