码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-06-04 15:14:01      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:

问题的条件有:

  • 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】的元素上

参考资料

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

标签:

原文地址:http://www.cnblogs.com/calin/p/4551749.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!