Shulou(Shulou.com)06/03 Report--

This article mainly introduces what to do when the horizontal scroll bar appears in iframe under IE6. The article is very detailed and has a certain reference value. Interested friends must read it!

The situation is as follows: (PS: the red box represents the area of iframe, and the gray box represents the elements of width:100% mentioned above, which need to be seen under IE6. )

The vertical and horizontal scroll bar appears when the height of the gray box is greater than the height of the iframe (under IE6).

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

Solution 1: style the inner page: html {overflow-y: scroll;}

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

When the height of the gray box is less than the height of the iframe, the vertical scroll bar is still displayed (unavailable) and defective.

Solution 2: style the inner page: html {overflow-x: hidden; overflow-y: auto;}

Only the vertical scroll bar appears when the height of the gray box is greater than the height of the iframe, but the content on the right is not complete (PS: the text inside is "this is a div as high as 200px"), the effect is not correct.

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

Solution 3: after many attempts, we still have not found a perfect solution for pure css, and we are pursuing the most perfect effect. Since pure css cannot be solved, we have to move out of js. Through the previous test, we found that there is no need to do any treatment when the height of the gray box is less than the height of iframe, while the first solution is perfect when the height of the gray box is greater than the height of iframe. Therefore, our js has the following idea: when the browser is IE6 and the content is higher than iframe, add the style of solution 1 to the html tag. Here is the code for jQuery: (the idea is the same without jQuery. )

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 longitudinal scroll bar appears, the effect is correct.

The effect is correct when the height of the gray box is less than the height of the iframe.

The above is all the content of this article "what to do when iframe appears horizontal scroll bar under IE6". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.