Fixed the bug of overflow using CSS attribute in IE.

We need to create an HTML file for testing. The following are the key points: Code Fragment

Copy code The Code is as follows: <div>
<PRE> <code>
<A href = "http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel = "License"> abide by my copyright </a>
<A href = "http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel = "License"> abide by my copyright </a>
<A href = "http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel = "License"> abide by my copyright </a>
<A href = "http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel = "License"> abide by my copyright </a>
<A href = "http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel = "License"> abide by my copyright </a>
</Code> </PRE>
</Div>

In the above code, I will apply the following CSS

Copy code Code: div {
Width: 60%;
}

Pre {
Overflow: auto;
Background-color: # fff0f5;
Margin: 1.6em 0;
Padding: 0 1.6em;
}

The above code is displayed in Firefox as expected.

However, in IE6, no Overflow Effect is displayed.

Figure 1 Effect of IE6

The display in IE7 is somewhat different, with an annoying scroll bar on the right.

Figure 2 Effect of IE7

The IE6 bug can be solved by adding width to the containing block, that is

Copy code The Code is as follows: Pre {
Overflow: auto;
Background-color: # fff0f5;
Margin: 1.6em 0;
Padding: 0 1.6em;
Width: 90%;
}

At this time, the scroll bar of IE6 is displayed, but it is the same as that of IE7, with an additional scroll bar on the right.

The reason for adding one more scroll bar to the right is that IE always adds the bottom scroll bar to the interior of the element's total height, so that part of the height of the element is occupied by the bottom scroll bar and cannot be completely displayed, therefore, ie automatically adds the scroll bar on the right to make the content blocked by the element scroll and see it.

Finally, to remove the scroll bar on the right side of IE, we add the following CSS to the containing block.Copy codeThe Code is as follows: Pre {
Overflow: auto;
Background-color: # fff0f5;
Margin: 1.6em 0;
Padding: 0 1.6em;
Width: 90%;
Overflow-Y: hidden;
}

In this way, we created the same overflow: auto effect as Firefox, opera, and safari in IE.

in practice, this effect can be applied to all elements in fixed format (usually pre elements), and the most common is the code block.