好的，今天公司分配了個(gè)解決ie中的bug的任務(wù)，其中，有一個(gè)就是iframe 的高度 100% 沒有生效的問題；

一開始，由于我真的沒有怎么去了解過iframe這個(gè)貨，所以，網(wǎng)上各種搜索一大堆關(guān)于這貨的資料，到最后，發(fā)現(xiàn)并沒有卵用，沒有找到問題的重點(diǎn)；

甚至搜索到請(qǐng)求頭要設(shè)置X-Frame-Options這個(gè)參數(shù)的點(diǎn)上去了，順帶說說，X-Frame-Options這個(gè)參數(shù)：

有時(shí)候?yàn)榱朔乐咕W(wǎng)頁被別人的網(wǎng)站iFrame,我們可以通過在服務(wù)器設(shè)置HTTP頭部中的X-Frame-Options信息
使用 X-Frame-Options 有三個(gè)可選的值：

DENY：瀏覽器拒絕當(dāng)前頁面加載任何Frame頁面

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

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

因此如果設(shè)置的值為DENY的時(shí)候，確實(shí)是不能顯示出來Frame,但是和我現(xiàn)在的問題并沒有什么卵關(guān)系；

好了廢話了這么多，現(xiàn)在來講講，為什么iframe 的高度100%會(huì)沒有生效呢？

首先這只是個(gè)ie11的bug,在ie11中，要讓iframe的高度100%生效，則必須要確定其父節(jié)點(diǎn)元素也設(shè)置了height:100%并且有效；

也即是說解決方法是在iframe的父節(jié)點(diǎn)元素設(shè)置css樣式 height: 100%,并且是生效的；這樣，iframe 的高度100%自然也就會(huì)乖乖的相對(duì)其父親有效了；

圖例：

1、before

2、after

解決方法就是在下面加紅地方的內(nèi)容。<td style="height:100%"><iframe src="welcome.asp" frameborder="0" width="100%" height="100%" align="middle" id="mainFrame" name="mainFrame" style="visibility:inherit; z-index:2; margin:0px;" scrolling="yes"></iframe></td>

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

最新評(píng)論