html - IFRAME 内的 Flash 在 Safari 上中断位置 :fixed elements

标签 html css flash safari css-position

更新了这个,因为我发现它不一定是嵌套的 IFRAME,而只是 IFRAMEd 文档中存在的 Flash 会破坏 position:fixed(也在 IFRAME 中)。

这是不真实的。在 Safari (Mac) 上:

  1. 快闪
  2. ...在 IFRAME 中(例如模态窗口、Fancybox 等)
  3. ...将“破坏”该 IFRAME 中的任何“position:fixed”元素。

这是一个完美的例子:http://jsfiddle.net/6GP2A/请注意,我们有:

  1. 包含 Flash 的 IFRAME(YouTube 视频)。
  2. 在另一个 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/

相关文章:

javascript - ActionscriptExternalInterface调用未到达javascript

jQuery 插件可以实现纽约时报风格的疯狂悬停缩放?

html - 更改 Jquery 移动元素的大纲/边框

jquery - IE8 : invisible third-level navigation menu in Foundation 5. 2

html - CSS 多浏览器中的 Aqua 按钮

css - 使用 Twitter Bootstrap 自动 float

javascript - 如何在appium中找到div按钮(sencha按钮)

html - 如何在 Ionic 3 中的个人资料图片下添加标签

less - 可以使用 LESS 来访问所选元素的现有属性的值吗?

apache-flex - 在 Flex 中调整容器大小的最佳方法是仅遵循父容器的显式尺寸