最近的項(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ū)域，灰色的長(zhǎng)方框表示上面提到的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來了，通過前面的測(cè)試我們發(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í)效果正確。

• iframe
• 滾動(dòng)條