IE9 parent container overflow: when the sub-container status changes, leading to the issue of extra space in the scroll bar, ie9overflow

IE9 parent container overflow: when the sub-container status changes, leading to the issue of extra space in the scroll bar, ie9overflow

Every time IE is updated, there will be some amazing bugs, and we will bear them silently.

This problem has plagued me in the project for nearly a week. Record it here. View the following instance

    <style>    .panel{        width: 200px;        overflow: auto;        background-color: #f00;    }    .inner{        width: 250px;        background-color: #ff0;    }    </style>    <div class="panel">        <div class="inner">            <input type="checkbox" />        </div>    </div>

The Display Effect in IE9 is

　　

Then you click the checkbox to display the following results:

　　

The red background is added, which obviously belongs to the parent container. panel. You can try to modify the status, value, content, and even sub-container of the sub-container. inner's label attributes (such as modifying class) will cause the parent container. the scroll bar of pannel has more space.

For example, we add a class: aaa to the. inner element. The effect is as follows:

　　

Test another example to add a value for input.

　　

So here we will summarize the above test results.

Prerequisites for an exception:

1. the css of the parent container has the css style overflow-x: auto (you can try it, overflow-y won't work ).

2. The child container and its Child container's child nodes have the status, value, content, attributes, and other modifications.

Solution:

Set the css style value of the parent container. Three related attributes can be set to any one.

Height: it can be set to px or %. For example, "height: 100%"

Min-height: it can only be set to %. It is recommended. For example, "min-height: 0% ".

Max-height: it can only be set to %. For example, "max-height: 100% ".

　　

This bug has been reported by others, you can refer to the http://social.microsoft.com/Forums/id-ID/1c239c1d-84d2-461b-991d-d7834edaa121/ie9bug? Forum = 267

 

If you think this article is good, click [recommendation] in the lower right corner ]!