Solution to the horizontal scroll bar in iframe under IE6

The situation is as follows: (PS: The red box represents the iframe area, and the gray rectangle represents the width:100% element mentioned above. You need to use IE6 to see the effect.)
When the height of the gray box is greater than the height of the iframe, vertical and horizontal scroll bars appear (under IE6).

The effect is normal when the height of the gray box is smaller than the height of the iframe.

Solution 1: Add style to the inner page: html { overflow-y: scroll; }
When the height of the gray box is greater than the height of the 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 the iframe, the vertical scroll bar is still displayed (unavailable), which is flawed.

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

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

Solution 3: After many attempts, we still haven't found the perfect pure CSS solution, and we are pursuing the most perfect effect. Since pure CSS can't solve the problem, we have to use JS. Through the previous test, we found that when the height of the gray box is less than the height of the iframe, no processing is required to achieve the correct effect, and when the height of the gray box is greater than the height of the iframe, solution one is perfect. Therefore, our js has the following idea: when the browser is IE6 and the content height is higher than the iframe, add the style of solution 1 to the html tag. Here is the jQuery code: (The idea is the same without jQuery.)

Copy code

The code is as follows:

$(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 the iframe, only the vertical scroll bar appears, and the effect is correct.
The effect is correct when the height of the gray box is smaller than the height of the iframe.
Learn to be happy every day (:

<<: How to implement the association between frame windows and the use of the target attribute of hyperlinks

>>: CSS implements the web component function of sliding the message panel