1

我在 webkit 中遇到问题，这是由于渲染引擎（或功能）中的错误，我似乎无法解决。

HTML：

<div id="left">
    Content
</div>
<div id="right">
    <div id="scroll">
        <div class="video">
            <!-- Flash -->
        </div>
        Sidebar
    </div>
</div>

CSS：

#left {
    float: left;
    width: 50%;
}

#right {
    float: right;
    position: fixed;
    right: 0;
    width: 50%;
    height: 100%;
}

#scroll {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}

JSFiddle：http: //jsfiddle.net/andrewryno/pUaM2/1/

当我在位置固定的滚动 div 中有一个 flash 对象时，就会出现问题。当您滚动时，一切都会按预期工作，直到您将鼠标悬停在 flash 对象上。一旦你这样做了，flash 会窃取你的注意力并开始滚动文档，而不是 div。似乎这只发生在 webkit 中。

我发现的唯一解决方法是在 flash 周围添加一个 div（我提供的 HTML 中的 .video）并添加：

.video {
    position: relative;
    z-index: -1;
}

问题在于它将 flash/div 移动到其父级后面，因此当它仍然可见并且滚动有效时，您无法再与 flash 交互。

这甚至可以解决吗？删除position: fixed;它使其工作，因此窃取焦点不是问题，而是固定位置是问题。

更新：

一直在尝试一些 JS 解决方案，但都没有奏效。使用 z-index “hack”，因此滚动开始/停止时 z-index 在 -1/0 之间的变化不起作用，因为当您将鼠标悬停在 flash 上时，jQuery 无法识别滚动事件。并且用 div 覆盖 flash 并在点击时将其删除是行不通的，因为您的第一次点击不会通过（而且我不能让 JS 点击 flash）。

4

1 回答 1

1

你为什么使用旧的嵌入代码？使用 iframe，它正在成为标准。

也不需要使用固定。使用绝对。

#left {
overflow-y: auto;
position: absolute;
left:0;
width: 50%;
height: 100%;
}

#right {
overflow-y: auto;
position: absolute;
right: 0;
width: 50%;
height: 100%;
}

这行得通吗？

http://jsfiddle.net/pUaM2/10/

于 2013-03-16T03:10:29.953 回答