bug记录:IE8,包含块min-height/height共存时的高度计算bug

Humphry

本文源自对http://segmentfault.com/q/1010000000378457的探索

问题条件

问题的条件有:

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

期待结果:

  • 若B元素为absolute定位元素,A元素为relative定位元素,则B元素的包含块高度为A元素的padding-edge高度
  • 若A、B元素均为常规流定位元素,则B元素的包含块高度为A元素的content-box高度
  • 若A元素同时设置了min-heightheight,同时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

我们先看看外层的计算。

.wrapperheight是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. IE8浏览器,.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. IE8浏览器,.inner static定位: .inner的包含块的content-box高度误用了height值而非min-height值,计算出来高度值为 20px height高度 = 20px

解决方案

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

参考资料


请输入图片描述
阅读 4.7k

整理强迫症患者的一生
本博客也会同步到:[链接]不来star一下吗

阿里妈妈招前端,有兴趣请 email 联系~

16.3k 声望
1.3k 粉丝
0 条评论

阿里妈妈招前端,有兴趣请 email 联系~

16.3k 声望
1.3k 粉丝
宣传栏