關於 iframe 在ie11 height:100% 無效的巨坑


好的,今天公司分配了個解決ie中的bug的任務,其中,有一個就是iframe 的高度 100% 沒有生效的問題;

一開始,由於我真的沒有怎么去了解過iframe這個貨,所以,網上各種搜索一大堆關於這貨的資料,到最后,發現並沒有卵用,沒有找到問題的重點;

甚至搜索到請求頭要設置X-Frame-Options這個參數的點上去了,順帶說說,X-Frame-Options這個參數:

有時候為了防止網頁被別人的網站iFrame,我們可以通過在服務器設置HTTP頭部中的X-Frame-Options信息
使用 X-Frame-Options 有三個可選的值:

DENY:瀏覽器拒絕當前頁面加載任何Frame頁面

SAMEORIGIN:frame頁面的地址只能為同源域名下的頁面

ALLOW-FROM:origin為允許frame加載的頁面地址

因此如果設置的值為DENY的時候,確實是不能顯示出來Frame,但是和我現在的問題並沒有什么卵關系;

好了廢話了這么多,現在來講講,為什么iframe 的高度100%會沒有生效呢?

首先這只是個ie11的bug,在ie11中,要讓iframe的高度100%生效,則必須要確定其父節點元素也設置了height:100%並且有效;

也即是說解決方法是在iframe的父節點元素設置css樣式 height: 100%,並且是生效的;這樣,iframe 的高度100%自然也就會乖乖的相對其父親有效了;

 

圖例:

1、before

2、after

 

 

最后,分享出來希望大家能夠不要被坑到了。有什么錯的地方希望各路大神指教指教,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM