Question

我正在开发一个Web应用程序，它在每个页面的顶部都有一个菜单，子菜单在菜单项悬停时会下拉。这工作正常，除了在我们试图在iframe中显示pdf的一个页面上。在这种情况下，悬停菜单都以iframe结尾。我已经尝试调整悬停菜单和iframe的z-index，但似乎都不起作用。到目前为止，FireFox 3.5和IE8都在发生这种情况。

有两种方法可以解决我的问题。我可以找到一种方法来准确调整CSS，以便我的菜单显示在iframe前面，或者如果有另一种方式来显示没有此问题的pdf，我也可以这样做。

谢谢！

Answer 1

这很可能是因为PDF显示在插件中，而不是在Web浏览器中本地显示。 CSS不会对此产生影响，因为CSS仅适用于在Web浏览器中呈现的内容。 Google确实有一个将PDF转换为HTML以便在浏览器中显示的系统，此时不存在z-index问题，但是在此过程中可能会丢失一些格式，当然它不再是PDF文档。除非有某种方法告诉 PDF插件本身降低其z-index（并考虑并非所有用户都将使用Adobe插件，有些人可能会使用Foxit或其他程序）你可能会出局好运。

Answer 2

尝试position:relative和z-index调整，将其放在iframe前面。

Answer 3

你在iframe中显示pdf？我猜它有某种Flash查看器？如果是这样，那么请确保正确设置flash嵌入代码的wmode。

http://kb2.adobe.com/cps/155/tn_15523.html

Answer 4

当我遇到这个问题时，我使用jQuery在显示叠加层之前分离iframe（在我的例子中也是一个模态）。一旦用户完成了模态/叠加，我就将iframe重新连接到DOM。 _viewerFrame和_viewerDiv当然只是一些css选择器。就我而言，iframe元素周围有一个包装div标签，可以轻松分离和附加。

// detach iframe
_frame = $(_viewerFrame).detach();

function reattach(frame) {
    // append it back to the div it was in (reattaching essentially)
    $(_viewerDiv).append(frame);
    setButtonStates();
    setViewerState();
}

function onOk() {

     ... // other code

     reattach(_frame);
}

function onCancel() {

     ... // other code

     reattach(_frame);
}

// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...

希望有帮助...

CSS悬停菜单出现在pdf iframe后面

4 个答案: