摘要：的是，被的覆盖，最终的高度值为计算值。这里所有的浏览器都计算正确。
本文源自对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常见bug的文章，里面提...
摘要：当一个内联元素想获得就要使用这个属性。下因为导致的浮动元素与普通元素之间产生代码如下我是浮动元素我是后面的文字，用来测试的正常情况下解决方式加一个的不只是文字，的浮动元素也会和内联元素产生的值。设置属性的元素不和任何元素发生合并。 发现我好久没更新博文了=-=这里把我之前在博客园写过的一篇关于BFC的文章粘贴过来，顺便自己也再次做个总结。 最近看了一篇总结ie常见bug的文章，里面提...
摘要：子容器溢出时，父容器出现滚动条。父容器或很显然，子容器溢出时，被父容器截断的情形无法和父容器自适应于子容器共存。现在这个布局可以自动生成，详见林小志的小工具图片垂直居中。溢出子容器溢出时会变成顶对齐，原因同上。 本文在evernote里有备份。如果evernote的阅读区域嫌窄了，那么可以把这个链接拖入书签并点击javascript:jQuery(#container).width(9...
摘要：对象脱离常规流，偏移定位是以窗口为参考绝对定位的元素，在，，，属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。例如设置百分比时，子元素继承是父元素乘以百分百之后的具体数值，所以可能会出现重叠现象。元素宽高 width,min-width,max-width等元素宽度设置百分比，以包含块的宽度为标准进行计算； height,min-height,max-hei...
阅读 2816·2021-11-08 13:20
阅读 835·2021-09-22 15:20
阅读 546·2019-08-30 15:53
阅读 1816·2019-08-30 15:43
阅读 1117·2019-08-29 17:21
阅读 429·2019-08-29 12:15
阅读 2226·2019-08-28 17:51
阅读 3033·2019-08-26 13:26
