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

【问题标题】：CSS hover menu appearing behind pdf iframe出现在 pdf iframe 后面的 CSS 悬停菜单
【发布时间】：2010-12-14 00:04:00
【问题描述】：

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

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

谢谢！

【问题讨论】：

我们可以看看一些 CSS 和 html 吗？

标签： css pdf iframe

【解决方案1】：

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

【讨论】：

这就是我所害怕的。我将不得不对此进行更多研究，看看它是否能满足该项目的需求（尽管我可能没有太多选择）。感谢您的意见。

【解决方案2】：

尝试position:relative 和z-index 调整以使其位于 iframe 前面。

【讨论】：

我试过了，它仍然出现在 iframe 后面。不过谢谢你的想法。

【解决方案3】：

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

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

【讨论】：

（如果设置为window，那么不管css，它总是在所有东西之上）
没有 Flash 查看器。只要您有 pdf 插件（adobe、foxit 等），您只需将 iframe 的源设置为 pdf，它就会在那里呈现。

【解决方案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, { ...

希望对您有所帮助...

【讨论】：