iframe在IE6下出現(xiàn)橫向滾動(dòng)條的解決方案
發(fā)布時(shí)間：2010-01-10 01:09:00 作者：佚名 
我要評(píng)論
我要評(píng)論最近的項(xiàng)目中，遇到ie6下當(dāng)iframe出現(xiàn)縱向滾動(dòng)條時(shí)同時(shí)會(huì)出現(xiàn)橫向滾動(dòng)條。分析了代碼，大致的原因是iframe中的頁面有相對(duì)body的樣式包含width:100%的元素。
情況如下：（PS：紅框表示iframe的區(qū)域，灰色的長方框表示上面提到的width:100%的元素，需要在IE6下看效果。）
當(dāng)灰色的框的高度大于iframe的高度時(shí)出現(xiàn)縱橫向滾動(dòng)條（IE6下）。
當(dāng)灰色的框的高度小于iframe的高度時(shí)效果正常。
解決方案一:給內(nèi)頁加上樣式：html { overflow-y: scroll; }
當(dāng)灰色的框的高度大于iframe的高度時(shí)僅出現(xiàn)縱向滾動(dòng)條，效果正確。
當(dāng)灰色的框的高度小于iframe的高度時(shí)縱向滾動(dòng)條仍然顯示（不可用狀態(tài)），有瑕疵。
解決方案二:給內(nèi)頁加上樣式：html { overflow-x: hidden; overflow-y: auto; }
當(dāng)灰色的框的高度大于iframe的高度時(shí)僅出現(xiàn)縱向滾動(dòng)條，但右邊內(nèi)容顯示不完全（PS：里面文字內(nèi)容是“這是個(gè)高為200px的div”），效果不正確。
當(dāng)灰色的框的高度小于iframe的高度時(shí)沒有滾動(dòng)條出現(xiàn)，效果正確。
解決方案三：經(jīng)過了多次嘗試仍然沒有發(fā)現(xiàn)純css的完美解決方案，而我們追求的是最完美的效果。既然純css解決不 了，我們只好搬出js來了，通過前面的測試我們發(fā)現(xiàn)灰色框高度小于iframe的高度時(shí)不需要做任何處理效果正確，而灰色框高度大于iframe的高度時(shí) 方案一是完美的。于是，我們的js有如下思路：當(dāng)瀏覽器為IE6且內(nèi)容高度比iframe高時(shí)給html標(biāo)簽加入方案一的樣式。下面是jQuery的代 碼：（不用jQuery的話思路一樣。）
$(function(){
if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll");
});
當(dāng)灰色的框的高度大于iframe的高度時(shí)僅出現(xiàn)縱向滾動(dòng)條，效果正確。
當(dāng)灰色的框的高度小于iframe的高度時(shí)效果正確。
學(xué)會(huì)開心每一天（：
當(dāng)灰色的框的高度大于iframe的高度時(shí)出現(xiàn)縱橫向滾動(dòng)條（IE6下）。
當(dāng)灰色的框的高度小于iframe的高度時(shí)效果正常。
解決方案一:給內(nèi)頁加上樣式：html { overflow-y: scroll; }
當(dāng)灰色的框的高度大于iframe的高度時(shí)僅出現(xiàn)縱向滾動(dòng)條，效果正確。
當(dāng)灰色的框的高度小于iframe的高度時(shí)縱向滾動(dòng)條仍然顯示（不可用狀態(tài)），有瑕疵。
解決方案二:給內(nèi)頁加上樣式：html { overflow-x: hidden; overflow-y: auto; }
當(dāng)灰色的框的高度大于iframe的高度時(shí)僅出現(xiàn)縱向滾動(dòng)條，但右邊內(nèi)容顯示不完全（PS：里面文字內(nèi)容是“這是個(gè)高為200px的div”），效果不正確。
當(dāng)灰色的框的高度小于iframe的高度時(shí)沒有滾動(dòng)條出現(xiàn)，效果正確。
解決方案三：經(jīng)過了多次嘗試仍然沒有發(fā)現(xiàn)純css的完美解決方案，而我們追求的是最完美的效果。既然純css解決不 了，我們只好搬出js來了，通過前面的測試我們發(fā)現(xiàn)灰色框高度小于iframe的高度時(shí)不需要做任何處理效果正確，而灰色框高度大于iframe的高度時(shí) 方案一是完美的。于是，我們的js有如下思路：當(dāng)瀏覽器為IE6且內(nèi)容高度比iframe高時(shí)給html標(biāo)簽加入方案一的樣式。下面是jQuery的代 碼：（不用jQuery的話思路一樣。）
復(fù)制代碼
代碼如下:$(function(){
if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll");
});
當(dāng)灰色的框的高度大于iframe的高度時(shí)僅出現(xiàn)縱向滾動(dòng)條，效果正確。
當(dāng)灰色的框的高度小于iframe的高度時(shí)效果正確。
學(xué)會(huì)開心每一天（：
相關(guān)文章
- iframe如何刷新一直都被網(wǎng)友所關(guān)注，接下來為大家詳細(xì)介紹下三種:用iframe的name屬性定位/id屬性定位/當(dāng)iframe的src為其它網(wǎng)站地址時(shí),感興趣的朋友可以參考下哈2013-03-29
iframe的src設(shè)置為about:blank之后細(xì)節(jié)探討
不設(shè)置為about:blank，內(nèi)存不會(huì)釋放掉。還必須用 iframe.document.write(''); 這樣才能將內(nèi)容清空，本文將詳細(xì)探討一下iframe的src設(shè)置為about:blank之后細(xì)節(jié)，感興趣的你2013-02-25- frame的src賦值的問題，本文將進(jìn)行詳細(xì)探討:服務(wù)器端的iframe重新src重新賦值,給iframe加一個(gè)ID，再加上runat=server，感興趣的你可不要錯(cuò)過了哈2013-02-25
網(wǎng)頁設(shè)計(jì)技巧:iframe自適應(yīng)高度的問題
所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe2012-11-12- iframes 提供了一個(gè)簡單的方式把一個(gè)網(wǎng)站的內(nèi)容嵌入到另一個(gè)網(wǎng)站中。但我們需要慎重的使用iframe。iframe的創(chuàng)建比其它包括scripts和css的 DOM 元素的創(chuàng)建慢了 1-2 個(gè)數(shù)量級(jí)2012-09-05
iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)
iframe一般用來包含別的頁面，例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站的內(nèi)容，為了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性，這里簡2014-10-01- 在構(gòu)建B/S系統(tǒng)界面的時(shí)候，經(jīng)常會(huì)遇到主頁面index.html中嵌套其他頁面的情況 ，雖然已經(jīng)有的庫已經(jīng)提供了控件(例如jQuery easy UI),但是有時(shí)候iframe的使用是不可避免的2010-08-06
- 有時(shí)候需要讓iframe繼承父頁面的顏色。不需要復(fù)雜的操作，簡單的幾個(gè)參數(shù)設(shè)置下即可。2010-07-21
IE6 select z-index無效，遮擋div bug的解決方法
在最近的一個(gè)項(xiàng)目中，遇到了IE6 select遮擋div的bug，為了解決這個(gè)bug我查了很多資料，試圖找到一個(gè)最最有效的方法，很多人是通過iframe的方法來解決，其實(shí)我查了國外的很2010-06-18Iframe 高度自適應(yīng)（兼容IE/Firefox、同域/跨域）
在實(shí)際的項(xiàng)目進(jìn)行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應(yīng)用開發(fā)也是如此。2010-03-17