IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间的问题探讨...

　　IE的每次跟新都会有一些奇葩的bug，我们默默承受了。

　　这个问题在项目中出现困扰了我近一个星期，这里记录一下。看下面实例

    <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>

　　在IE9下的显示效果为

　　然后你点击那个checkbox显示效果如下

　　多出了红色背景那块，那块明显是属于父容器.panel。你一个可以试一下只要是更改子容器中的标签的状态、值、内容甚至修改子容器.inner的标签属性（比如修改class）都会导致父容器.pannel的滚动条下多出一些空间。

　　比如我们为.inner元素加了一个class：aaa。效果如下

　　再测试一个例子，为input添加一个value值

　　所以综合前面的测试结果，这里总结一下。

出现显示异常的必备条件：

　　1.父容器的css拥有css样式overflow-x:auto(大家可以动手试一下，overflow-y是不行的)。

　　2.子容器及子容器的后代节点有状态、值、内容、属性等的修改。

解决方案：

　　设置父容器的高度相关的css样式值。这里面主要有三个相关的属性可以设置任意一个。

　　height:可以设置成px或%。比如"height:100%"

　　min-height:只能设置成%，推荐使用。比如"min-height:0%"。

　　max-height:只能设置成%。比如"max-height:100%"。

　　这个bug别人也报过，可以参考http://social.microsoft.com/Forums/id-ID/1c239c1d-84d2-461b-991d-d7834edaa121/ie9bug?forum=267

　　如果觉得本文不错，请点击右下方【推荐】！

转载于:https://www.cnblogs.com/chuaWeb/p/5047380.html

IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间的问题探讨...相关推荐

ie9 scrollbar bug（IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间）
转自文章 http://www.jackness.org/2011/10/18/ie9-scrollbar-bug/ 当我们制作表单的时候,有时候会遇到数据过长,表单列数过多,需要横向滚动条的需求, ...
使用displsy:flex + overflow:hidden时子元素被压缩
博客地址以下结构就很可能会发生子元素被压缩: ul {display: flex;overflow: hidden;li {display: flex;}} 效果: 此时我的目的是做一个轮播图,想让 ...
设置子父元素overflow:hidden，子元素absolute不显示问题
需求描述 vue项目用的vue-awesome-swiper插件实现下图结果: 为什么溢出来的元素自然就隐藏了解决首先我想到了给swiper容器overflow-x:hidden然后overf ...
css居父容器下,整理：子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relative ...
flex与grid响应式布局中的子容器为固定空间后的剩余空间，该元素容器不出现滚动条或者滚动条异常问题
flex与grid响应式布局中的子容器滚动条问题最近在用grid布局写一些简单的响应式页面页面,遇到一个问题,就是我们的全局用grid布局或者flex布局中,遇到某个子元素的宽度或者高度是页面剩下的 ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
【转】解决父容器高度不跟随子元素扩大的问题
原文链接:http://blog.sina.com.cn/s/blog_674379bf0100lyy3.html 方法一: 编写CSS使用DIV的FLOAT属性使元素浮动,在父容器中添加zoom:1 ...
Spring - 父容器与子容器
一.Spring容器(父容器) 1.Mapper代理对象 2.Service对象二.Springmvc(前端控制器)(子容器) Controller对象 1.标准的配置是这样的:Con ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...

IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间的问题探讨...

IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间的问题探讨...相关推荐

最新文章

热门文章