Solution for iframe to show a horizontal scroll bar under IE6

Http://www.cnblogs.com/tglgx/archive/2009/06/28/1532223.html

In the most recent project, when an iframe vertical scroll bar appears in ie6, a horizontal scroll bar appears at the same time. After analyzing the code, the general reason is that the page in iframe has an element with a width: 100% relative to the body style. The following figure shows the situation: (PS: red box indicates the iframe area, and the gray long square box indicates the elements of width: 100% mentioned above. You need to check the effect in IE6 .)
When the height of the gray box is greater than the height of iframe, a vertical scroll bar (under IE6) appears ).

If the height of the gray box is smaller than the height of iframe, the validity period is normal.

Solution 1: Add the style: html {overflow-y: scroll;} to the inner page ;}
When the height of the gray box is greater than the height of iframe, only the vertical scroll bar appears, and the effect is correct.

When the height of the gray box is smaller than the height of iframe, the vertical scroll bar is still displayed (unavailable.

Solution 2:Add the style: html {overflow-x: hidden; overflow-y: auto;} to the inner page ;}
When the height of the gray box is greater than the height of iframe, only the vertical scroll bar appears, but the content on the right side is not completely displayed (PS: The text content inside is "this is a div with a height of 200px "), the result is incorrect.

When the height of the gray box is smaller than the height of iframe, no scroll bar appears, and the effect is correct.

Solution 3: After several attempts, we still did not find the perfect solution for pure css, but we are pursuing the most perfect results. Since pure css cannot be solved, we have to move out of js. Through the previous test, we found that the gray box height is smaller than the iframe height, and no processing effect is required, while the gray box height is greater than the iframe height, solution 1 is perfect. Therefore, our js has the following idea: When the browser is IE6 and the content height is higher than iframe, add the style of solution 1 to the html Tag. The following is jQuery code generation: (the same idea is used without jQuery .)

$(function(){
    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height())
        $("html").css("overflowY","scroll");
});

When the height of the gray box is greater than the height of iframe, only the vertical scroll bar appears, and the effect is correct.

If the height of the gray box is smaller than the height of iframe, the validity period is correct.

Learn to be happy every day (: