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

suxier 发布于2019-08-28 17:51 / 2373人阅读

摘要：的是，被的覆盖，最终的高度值为计算值。这里所有的浏览器都计算正确。

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

问题条件

问题的条件有：

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定位下的区别有：

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

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

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

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

解决方案

去掉.wrapper上的overflow:hidden;

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

参考资料

关于包含块的判定：http://w3help.org/zh-cn/kb/008/

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110849.html

谈谈BFC与ie特有属性hasLayout

摘要：当一个内联元素想获得就要使用这个属性。下因为导致的浮动元素与普通元素之间产生代码如下我是浮动元素我是后面的文字，用来测试的正常情况下解决方式加一个的不只是文字，的浮动元素也会和内联元素产生的值。设置属性的元素不和任何元素发生合并。发现我好久没更新博文了=-=这里把我之前在博客园写过的一篇关于BFC的文章粘贴过来，顺便自己也再次做个总结。最近看了一篇总结ie常见bug的文章，里面提...

CodeSheep 2019-08-30 12:51 评论0 收藏0
谈谈BFC与ie特有属性hasLayout

摘要：当一个内联元素想获得就要使用这个属性。下因为导致的浮动元素与普通元素之间产生代码如下我是浮动元素我是后面的文字，用来测试的正常情况下解决方式加一个的不只是文字，的浮动元素也会和内联元素产生的值。设置属性的元素不和任何元素发生合并。发现我好久没更新博文了=-=这里把我之前在博客园写过的一篇关于BFC的文章粘贴过来，顺便自己也再次做个总结。最近看了一篇总结ie常见bug的文章，里面提...

iliyaku 2019-08-01 15:08 评论0 收藏0
整理：子容器垂直居中于父容器的方案

摘要：子容器溢出时，父容器出现滚动条。父容器或很显然，子容器溢出时，被父容器截断的情形无法和父容器自适应于子容器共存。现在这个布局可以自动生成，详见林小志的小工具图片垂直居中。溢出子容器溢出时会变成顶对齐，原因同上。本文在evernote里有备份。如果evernote的阅读区域嫌窄了，那么可以把这个链接拖入书签并点击javascript:jQuery(#container).width(9...

youkede 2019-08-28 17:51 评论0 收藏0
属性设置百分比时的计算参考汇总

摘要：对象脱离常规流，偏移定位是以窗口为参考绝对定位的元素，在，，，属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。例如设置百分比时，子元素继承是父元素乘以百分百之后的具体数值，所以可能会出现重叠现象。元素宽高 width,min-width,max-width等元素宽度设置百分比，以包含块的宽度为标准进行计算； height,min-height,max-hei...

Moxmi 2019-04-23 11:56 评论0 收藏0
CSS概念【记录】

摘要：语法规则注释层叠优先级继承值块格式化上下文盒模型层叠上下文可替换元素外边距合并包含块视觉格式化模型布局模式语法属性值声明声明块规则规则集规则规则一个语句定义样式表使用的字符集告诉引擎引入一个外部样式表嵌套规则如果满足媒介查询的条件则条件规则 1、CSS语法 2、@规则 3、注释 4、层叠 5、优先级 6、继承 7、值 8、块格式化上下文 9、盒模型 10、层叠上下文 11、可替换元素 12、...

番茄西红柿 2019-04-23 11:55 评论0 收藏0