更新了这个,因为我发现它不一定是嵌套的 IFRAME,而只是 IFRAMEd 文档中存在的 Flash 会破坏 position:fixed(也在 IFRAME 中)。
这是不真实的。在 Safari (Mac) 上:
- 快闪
- ...在 IFRAME 中(例如模态窗口、Fancybox 等)
- ...将“破坏”该 IFRAME 中的任何“position:fixed”元素。
这是一个完美的例子:http://jsfiddle.net/6GP2A/请注意,我们有:
- 包含 Flash 的 IFRAME(YouTube 视频)。
- 在另一个 IFRAMEd 文档中(jsfiddle IFRAME 结果)
请注意,视频本身是 IFRAMEd 这一事实是在转移注意力。如果 Flash 只是一个没有 IFRAME 的 OBJECT 标签,您会遇到同样的问题。
如果您在 Chrome 中打开它,它将按预期工作。灰色的“hello I am fixed”DIV(即 postion:fixed)将固定在底部。
在 Safari 中,灰色的 DIV 会随着您滚动页面而滑动。
啊啊啊!有什么建议吗?无数次的寻找都没有结果。谢谢!
最佳答案
我遇到了同样的问题,但是不能拒绝帧。 所以我调查了这个问题并找到了一些解决方案(我猜):
当必要的frame中有嵌套flash的div,div的样式为“position: relative; z-index: -1;”那么框架中带有“位置:固定”的元素看起来很好。
例如
<html>
<head>
<style>
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
.footer {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<frameset rows="20,*">
<frame>...</frame>
<frame>
<div class="menu">Header</div>
<!-- Some content here -->
<object width="440px" height="220px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/you_flash.swf" name="movie">
<embed width="440px" height="220px" type="application/x-shockwave-flash" src="http://youdomain.com/you_flash.swf">
</object>
<!-- Some content here -->
<div style="position: relative; z-index:-1;">
<object width="10px" height="10px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/fake_flash.swf" name="movie">
<embed width="10px" height="10px" type="application/x-shockwave-flash" src="http://youdomain.com/fake_flash.swf">
</object>
</div>
<div class="menu">Footer</div>
</frame>
</frameset>
</body>
</html>
一个带flash的div就够了。所有其他的都可以保持原样。
请注意 - 您将无法点击此 div 中的 flash。我写了一个脚本,它将动态地将带有空 flash 的 div 添加到 Mac 上的 Safari。
希望对您有所帮助。
愿原力与你同在。
关于html - IFRAME 内的 Flash 在 Safari 上中断位置 :fixed elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7841731/