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

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

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

  1. View Stack容器,按钮选择子容器

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  2. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  3. 让超出div内容的显示滚动条:overflow:auto,以及overflow其它属性

    css的属性,以前没用过遇到了,记录一下: 虽然layui本来自带这个处理,但是为了灵活,抛弃layui原有的加载,只是用layui的样样式,就要使用到这个css属性 总结overflow属性: /* ...

  4. 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  5. winform子容器随父容器的变化设置

    在设计winform窗体时,因为会很少去调整窗体的大小,这时子控件就会出很尴尬的情况, 通过查看空间的属性,发现有这样两个属性,dock和anchor.这里主要说anchor,官方 解释没太看懂,我的 ...

  6. 关于Spring父容器和SpringMvc子容器

    在SSM项目中,会有SpringMvc容器(子容器)和Spring容器(父容器) 一共2个容器 基本规则: 子容器可以访问父容器的bean,父容器不能访问子容器的bean. 当<context: ...

  7. Spring父容器与子容器

    在使用spring+springMVC的web工程中,我们一般会在web.xml中做如下配置: <context-param> <param-name>contextConfi ...

  8. Spring - 父容器与子容器

    一.Spring容器(父容器) 1.Mapper代理对象 2.Service对象 二.Springmvc(前端控制器)(子容器)        Controller对象 1.标准的配置是这样的:Con ...

  9. .NET同一个页面父容器与子容器通信方案

    主界面: 关键主页面代码: <div id="EditDiv"> <iframe src="javascript:void(0)" id=&q ...

随机推荐

  1. Jexus针对Asp.net core应用程序的六大不可替代的优势

    1,配置简便:在Jexus上,Asp.net core只是Jexus上的一个"站点",因此,只需在Jexus上配置这个站点就行,无需其它配置: 2,操作统一:Jexus停止这个站点 ...

  2. 分布式系统一致性问题和Raft一致性算法

    一致性问题 一致性算法是用来解决一致性问题的,那么什么是一致性问题呢? 在分布式系统中,一致性问题(consensus problem)是指对于一组服务器,给定一组操作,我们需要一个协议使得最后它们的 ...

  3. STC12C5A60S2笔记1(管脚定义)

    STC12C5A60S2管脚定义 管脚1:标准IO口P1.0.ADC0 模数转换通道0.CLKOUT2 波特率发生器的时钟输出 管脚2:标准IO口P1.1.ADC1 模数转换通道1 管脚3:标准IO口 ...

  4. Hadoop日记Day12---MapReduce学习

    一.MapReduce简介 1.1MapReduce概述 MapReduce是一种分布式计算模型,由Google提出,主要用于搜索领域,解决海量数据的计算问题.MR由两个阶段组成:Map和Reduce ...

  5. java提高篇(四)-----理解java的三大特性之多态

    面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...

  6. (小常识)Dictionary的遍历

                Dictionary<int, string> objDictionary = new Dictionary<int, string>();       ...

  7. ios 截屏

    把当前屏幕作为获取成为图片 - (UIImage *)rn_screenshot {    UIGraphicsBeginImageContext(self.bounds.size);    [sel ...

  8. js模仿新浪微博限制字数输入

    功能:实现新浪微博输入字数提醒功能:最多输入140个字,当输入字时,上面提示部分字数发生变化,如果字数小于25,字体颜色变红:当可输入字数为0时,强制不能输入,如果用中文输入法 一次性输入很多字,那么 ...

  9. fir.im Weekly - 给 Mac 应用开发者的教程

    写作是一件苦差事.无论写代码,还是写文章. 关于 Mac 应用开发,国内很少有完整的书籍或教程.最近@剑指人心写的 <Mac 应用开发基础教程>终于!完!稿!了! 这本书中对 Mac 平台 ...

  10. 每天一个linux命令(41):ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...