IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
来源:互联网 发布:软件证书挂靠查询 编辑:程序博客网 时间:2024/06/06 00:27
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
如果觉得本文不错,请点击右下方【推荐】!
0 0
- IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
- overflow:auto;父容器高度自适应问题
- overflow:auto;子元素浮动后父容器高度自适应问题
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- ie6,ie7下设置overflow:auto下滚动条不起作用
- ie9 overflow:auto有一个问题
- 设置overflow:auto表格没有滚动条的解决办法
- jquery 地图缩放时禁止父容器滚动条滚动
- overflow:auto; 固定大小出滚动条
- CSS-overflow:auto溢出加滚动条
- IE7下设置overflow-y: scroll出现滚动条的问题解决办法
- 父容器子容器大小设为百分比时,无法获取容器实际大小的问题的解决
- 子元素scroll父元素容器不跟随滚动(JS实现),子元素内滚动条没有(css实现)
- CSS---前端通过 css如何实现overflow:auto滚动超出部分的同时隐藏滚动条?
- cocos-js里面解决滚动容器没有滚动条的问题
- 使用Auto Layout导致调用addSubView时出现的问题
- TWebBrowser滚动条的显示问题探讨。
- jQuery 实现bootstrapValidator下的全局验证
- 报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常
- window、document、html、body、element的事件属性比较
- js基础篇——原型与原型链的详细理解
- [bzoj4367][IOI2014]holiday假期
- IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
- iframe的内容增高或缩减时设置其iframe的高度的处理方案
- 《Android开发艺术探索》15章Android性能优化
- Android studio 查看签名文件MD5,SHA1
- 多iframe使用tab标签方式添加、删除、切换的处理实例
- Android内存优化之OOM
- html/css基础篇——html代码编写过程中的几个警惕点
- 滚动条滚动到页面底部继续加载的处理实例
- input中的disabled、readonly和hidden别误用