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