IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题
代码
<style>
.panel{
width: 200px;
overflow: auto;
background-color: #f00;
}
.inner{
width: 250px;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="panel">
<div class="inner">
<input type="checkbox" />
</div>
</div>
</body>
IE9中的效果
当点击复选框后的效果
出现显示异常的必重点内容备条件:
1.父容器的css拥有css样式overflow-x:auto(大家可以动手试一下,overflow-y是不行的)。
2.子容器及子容器的后代节点有状态、值、内容、属性等的修改。
解决方案:
设置父容器的高度相关的css样式值。这里面主要有三个相关的属性可以设置任意一个。
height:可以设置成px或%。比如”height:100%”
min-height:只能设置成%,推荐使用。比如”min-height:0%”。
max-height:只能设置成%。比如”max-height:100%”。
(本文转自:https://blog.csdn.net/chen_hua89/article/details/50824579)