Fix the bug of using CSS attribute overflow under IE_Experience exchange

We are going to create a test HTML file. The following is the key code snippet

Copy code The code is as follows:

<code> <br> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license" phpc ngtphpcn respects my copyright> <br> </a><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">Abide by my copyright</a> <br> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">Abide by my copyright </a> <br> <a href="http://creativecommons.org/%20licenses/by-nc-sa/2.5/cn/" rel="license">obey my copyright </a> <br> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5%20/cn/" rel="license">obey my copyright</a> <br> </code>

In the above code I will apply the following CSS

Copy code The code is as follows:

div{
width: 60%; }

pre{
overflow: auto;
background-color: #fff0f5;
margin: 1.6em 0;
padding: 0 1.6em;
}

The display of the above code in Firefox is predictable.

But in IE6, no overflow effect can be displayed

Figure 1 The effect under IE6

The display in IE7 is also a little different, with an annoying right scroll bar

Figure 2 Effect under IE7

The bug in IE6 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 comes out, but it behaves the same as IE7, with an additional right scroll bar.

The reason for having an extra right scroll bar is that IE always adds the bottom scroll bar inside the total height of the element, so that part of the height of the element is occupied by the bottom scroll bar and cannot be fully displayed, so IE A scroll bar on the right is automatically added so that the content of the blocked element can also be seen after scrolling.

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

Copy code The 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 create the same overflow in IE as Firefox, Opera and Safari: auto Effect.

In practical applications, this effect can be applied to all fixed-format elements (usually pre elements), most commonly code blocks.