问题的条件有：

  • A元素是B元素的包含块。
  • A元素设置overflow:hidden;，并同时设置了height和min-height，同时height计算值 < min-height
  • 原生IE8浏览器，或者IE9浏览器的IE8兼容性模式（以下统称为IE8）

期待结果：

  • 若B元素为absolute定位元素，A元素为relative定位元素，则B元素的包含块高度为A元素的padding-edge高度
  • 若A、B元素均为常规流定位元素，则B元素的包含块高度为A元素的content-box高度
  • 若A元素同时设置了min-height和height，同时height计算值小于min-height。因为height权重小于min-height，最终A元素的content-box高度计算值应以min-height为准

IE8的bug是：

  • 若B元素的包含块的content-box的值计算错误，在height计算值小于min-height的同时，误取了heihgt值作为其包含块的content-box部分
  • B元素跟其包含块有关的属性，如百分比top/bottom/百分比height均受到影响，因此，B元素的位置可能受到影响
  • A元素的最终高度计算依然正确
  • 受到影响的仅仅是以A元素为包含块的元素，包括B元素

DEMO

  • 一个使用了absolute定位的DEMO：

http://jsfiddle.net/humphry/Xzy28/7/

  • 一个未使用absolute定位的DEMO，可见jsfiddle：

http://jsfiddle.net/humphry/NSCLa/8/

我们看一下渲染结果的区别。

计算流程，试解释

  absolute static
其他浏览器 外层高500/内层高500 外层高500/内层高300
IE8 外层高500/内层高220 外层高500/内层高20

我们先看看外层的计算。

.wrapper的height是20px，被min-height的300px覆盖，最终的高度值为：100px padding-top + 100px padding-bottom + 200px height计算值 = 500px。这里所有的浏览器都计算正确。

对于内层，IE8/其他正常浏览器，在absolute定位和static定位下的区别有：

  1. 正常浏览器，.innerabsolute定位： .inner设置了100%高度，即100%的包含块的高度，即外层容器的padding-edge高度，也就是外层容器的 200px padding高度 + 300px content-box高度 = 500px

  2. IE８浏览器，.innerabsolute定位： .inner的包含块的content-box高度误用了height值而非min-height值，计算出来高度值为 200px padding高度 + 20px height高度 = 220px

  3. 正常浏览器，.inner　static定位： .inner设置了100%高度，即100%的包含块的高度，即外层容器的content-box高度，也就是外层容器的 300px content-box高度 = 300px

  4. IE８浏览器，.inner　static定位： .inner的包含块的content-box高度误用了height值而非min-height值，计算出来高度值为 20px height高度 = 20px

解决方案

  • 去掉.wrapper上的overflow:hidden;
  • overflow:hidden;加在不【同时设置height、min-height，且height计算值<min-height】的元素上

参考资料

最新文章

  1. Retrofit 2.0使用
  2. [Jquery]判断数据类型
  3. MVC4怎么设置@Html.TextBoxFor这样的输入框的css样式
  4. Target runtime Apache Tomcat v7.0 is not defined.
  5. CGI标准简介 ~ Django
  6. mac 下tomcat启动报错 unknown host
  7. JNI 学习笔记
  8. ecshop获取url_domain
  9. Face recognition using Histograms of Oriented Gradients
  10. 2013第49周一jsp标签
  11. Create screenshots of a web page using Python and QtWebKit | Roland's Blog
  12. 20天android学习
  13. 学会Func
  14. React Router 4.x 开发，这些雷区我们都帮你踩过了
  15. Android 官方DEMO - ActionBarCompat-Basic
  16. C++中String类的字符串分割实现
  17. Python基础（3）if_else、for、while、break与continue
  18. MySQL中使用Like模糊查询太慢
  19. Spring MVC测试框架详解——服务端测试
  20. 两种Service如何一起使用

热门文章

  1. RecyclerView 初体验
  2. 关于android开发环境中sdk和adt更新到22.6之后多了appcompat_v7
  3. RK3288 模块单独编译
  4. 解决spring 事务管理默认不支持SQLException等运行时异常
  5. linux 系统创建软连接
  6. FPGA中计数器设计探索
  7. Java中判断非空对象.
  8. form表单使用(博客系统的登陆验证，注册)
  9. Deep Learning 学习笔记（8）：自编码器( Autoencoders )
  10. PHP class 继承