出現在pdf後面的CSS懸停菜單iframe

Question

我正在研究一個Web應用程序，它在每個頁面頂部都有一個菜單，子菜單在菜單項懸停時下拉菜單。這工作正常，除了我們試圖在iframe中顯示pdf的頁面。在這種情況下，懸停菜單都在iframe後面。我曾嘗試調整懸停菜單和iframe的z-index，但似乎都不起作用。到目前爲止，FireFox 3.5和IE8都出現這種情況。

我的問題有兩種解決方法。我可以找到一種方法來精確調整CSS，以便我的菜單出現在iframe之前，或者如果有另一種方法顯示沒有這個問題的PDF，我也可以這樣做。

謝謝！

Answer 1

當我遇到了這個問題，我用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, { ... 

希望幫助...

Answer 2

這很可能是因爲PDF在插件中顯示，而不是本地在Web瀏覽器中顯示。 CSS不會對此產生影響，因爲CSS僅適用於在Web瀏覽器中呈現的內容。 Google確實有一個將PDF轉換爲HTML以便在瀏覽器中顯示的系統，此時不會出現z索引問題，但某些格式可能在此過程中丟失，當然它不再是PDF文檔。除非有辦法告訴PDF插件本身降低它的z-索引（並且認爲並非所有的用戶都將使用Adobe插件，有些人可能會使用Foxit或其他程序），否則你可能會倒黴。

Answer 3

嘗試將position:relative和z-index調整爲使其位於iframe之前。

Answer 4

您在iframe中顯示pdf嗎？我猜它有某種Flash瀏覽器？如果是這樣，那麼請確保您適當地設置了Flash嵌入代碼的wmode。

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