Question

更新了这个，因为我发现它不一定是嵌套的IFRAME，而只是在IFRAMEd文档中存在Flash会破坏位置：固定（也在IFRAME中）。

这是不真实的。在Safari（Mac）上：

闪存
...在IFRAME中（例如，模态窗口，Fancybox等）
...将“破坏”该IFRAME中的任何“position：fixed”元素。

以下是一个完美的例子：http://jsfiddle.net/6GP2A/请注意，我们有：

包含Flash（YouTube视频）的IFRAME。
在另一个IFRAMEd文档中（jsfiddle IFRAMEs结果）

请注意，视频本身是IFRAMEd的事实是红鲱鱼。如果Flash只是一个没有IFRAME的OBJECT标签，那么你会遇到同样的问题。

如果您在Chrome中打开它，它将按预期工作。灰色的“你好我固定”DIV（位置：固定）将保持固定在底部。

在Safari中，当您滚动页面时，灰色DIV将会滑动。

Arrrrgh！有什么建议？无数次搜索毫无结果。谢谢！

Answer 1

我遇到了同样的问题，但我们不能拒绝框架。所以我调查了这个问题，我发现了一些解决方案（我猜）：

当在必要的框架中有嵌套闪存的div和div的样式时，“position：relative; z-index：-1;”然后框架中“position：fixed”的元素看起来很好。

例如

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

一个带闪光灯的div足够了。所有其他可能都是原样。

一句话 - 您将无法点击此div中的闪光灯。我编写了一个脚本，它将动态地将带有空闪存的div添加到Mac上的Safari。

希望这有用。

愿部队与你同在。

Safari上的IFRAME中的Flash会中断位置：固定元素

1 个答案: