Fixed the Bug_ experience Exchange using CSS properties overflow under IE

We're going to build a test HTML file, and here's the key piece of code

Copy Code code 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 as follows:

div{
width:60%;
}

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

The above code in the Firefox display is predictable.

But in IE6, no overflow effect can be shown.

Fig. 1 Effect under IE6

And the display in the IE7 is also somewhat different, with a more annoying right scroll bar

Fig. 2 Effect under IE7

IE6 bugs can be resolved by adding a width to the containing block, namely

Copy Code code as follows:

pre{
Overflow:auto;
Background-color: #fff0f5;
Margin:1.6em 0;
Padding:0 1.6em;
width:90%;
}

At this point, the IE6 scroll bar comes out, but it is the same as the IE7, with one more right scroll bar.

One more right scroll bar is the reason: ie always adds the bottom scroll bar to the inside of the total height of the element, so that part of the element height is occupied by the bottom scroll bar and cannot be fully displayed, so IE automatically adds the right scroll bar so that the elements are blocked and can be scrolled.

Finally, to remove the scroll bar on the right side of IE, we add the following CSS to containing block

Copy Code code as follows:

pre{
Overflow:auto;
Background-color: #fff0f5;
Margin:1.6em 0;
Padding:0 1.6em;
width:90%;
Overflow-y: Hidden;
}

So we created the same overflow:auto effect as Firefox, Opera and Safari in IE.

In practice, this effect can be applied to all fixed-form elements (usually the pre element), most commonly a block of code.