HTML中PDF蓋住彈出層怎麼辦?

Tags: 網頁, 瀏覽器,

大家經常會遇到網頁中嵌入PDF之後,會遮住其他的彈出層,但是這種現象只在IE瀏覽器中出現。解決這個問題需要我們使用iframe加塞,具體的操作步驟如下

方法/步驟

首先,我們新建一個簡單的頁面來重現一下,PDF文件遮蓋彈出層的bug。左邊是IE的效果,右邊是firefox的。

HTML中PDF蓋住彈出層怎麼辦

HTML中PDF蓋住彈出層怎麼辦

我們的程式碼如下圖,是建一個position:fixed的div,在同級建一個div,裡面放iframe,iframe裡面加一個pdf檔案,接下來,保證定位的div,定位在pdf的區域。

HTML中PDF蓋住彈出層怎麼辦

之所以會出現這個bug,是因為在IE中,巢狀PDF的iframe會預設在整個頁面的最上方,並且不受HTML的程式碼z-index的約束。

HTML中PDF蓋住彈出層怎麼辦

我們需要做的是在彈出層的同級,或者說是彈出層的後面,加一個和彈出層大小和位置完全一致的空的iframe。

HTML中PDF蓋住彈出層怎麼辦

加上之後,可以看到在IE瀏覽器中,彈出層浮到PDF檔案的上面了。但是firefox裡面會亂掉 。

HTML中PDF蓋住彈出層怎麼辦

我們需要給加塞的iframe一個註釋,讓其只在ie中有效,在IE意外的其他瀏覽器中無效。我寫的這段使其在IE9以外的其他瀏覽器中空的iframe不顯示。

HTML中PDF蓋住彈出層怎麼辦

相關問題答案