資訊專欄INFORMATION COLUMN
摘要：的是，被的覆蓋，最終的高度值為計(jì)算值。這里所有的瀏覽器都計(jì)算正確。
本文源自對(duì)http://segmentfault.com/q/1010000000378457的探索
問題條件問題的條件有：
A元素是B元素的包含塊。
A元素設(shè)置overflow:hidden;，并同時(shí)設(shè)置了height和min-height，同時(shí)height計(jì)算值 < min-height
原生IE8瀏覽器，或者IE9瀏覽器的IE8兼容性模式（以下統(tǒng)稱為IE8）
期待結(jié)果：
若B元素為absolute定位元素，A元素為relative定位元素，則B元素的包含塊高度為A元素的padding-edge高度
若A、B元素均為常規(guī)流定位元素，則B元素的包含塊高度為A元素的content-box高度
若A元素同時(shí)設(shè)置了min-height和height，同時(shí)height計(jì)算值小于min-height。因?yàn)?b>height權(quán)重小于min-height，最終A元素的content-box高度計(jì)算值應(yīng)以min-height為準(zhǔn)
IE8的bug是：
若B元素的包含塊的content-box的值計(jì)算錯(cuò)誤，在height計(jì)算值小于min-height的同時(shí)，誤取了heihgt值作為其包含塊的content-box部分
B元素跟其包含塊有關(guān)的屬性，如百分比top/bottom/百分比height均受到影響，因此，B元素的位置可能受到影響
A元素的最終高度計(jì)算依然正確
受到影響的僅僅是以A元素為包含塊的元素，包括B元素
DEMO一個(gè)使用了absolute定位的DEMO：
http://jsfiddle.net/humphry/Xzy28/7/
一個(gè)未使用absolute定位的DEMO，可見jsfiddle：
http://jsfiddle.net/humphry/NSCLa/8/
我們看一下渲染結(jié)果的區(qū)別。
計(jì)算流程，試解釋| absolute | static | |
| 其他瀏覽器 | 外層高500/內(nèi)層高500 | 外層高500/內(nèi)層高300 |
| IE8 | 外層高500/內(nèi)層高220 | 外層高500/內(nèi)層高20 |
我們先看看外層的計(jì)算。
.wrapper的height是20px，被min-height的300px覆蓋，最終的高度值為：100px padding-top + 100px padding-bottom + 200px height計(jì)算值 = 500px。這里所有的瀏覽器都計(jì)算正確。
對(duì)于內(nèi)層，IE8/其他正常瀏覽器，在absolute定位和static定位下的區(qū)別有：
正常瀏覽器，.innerabsolute定位： .inner設(shè)置了100%高度，即100%的包含塊的高度，即外層容器的padding-edge高度，也就是外層容器的 200px padding高度 + 300px content-box高度 = 500px
IE８瀏覽器，.innerabsolute定位： .inner的包含塊的content-box高度誤用了height值而非min-height值，計(jì)算出來高度值為 200px padding高度 + 20px height高度 = 220px
正常瀏覽器，.inner static定位： .inner設(shè)置了100%高度，即100%的包含塊的高度，即外層容器的content-box高度，也就是外層容器的 300px content-box高度 = 300px
IE８瀏覽器，.inner static定位： .inner的包含塊的content-box高度誤用了height值而非min-height值，計(jì)算出來高度值為 20px height高度 = 20px
解決方案去掉.wrapper上的overflow:hidden;
overflow:hidden;加在不【同時(shí)設(shè)置height、min-height，且height計(jì)算值<min-height】的元素上
參考資料
關(guān)于包含塊的判定：http://w3help.org/zh-cn/kb/008/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110849.html
摘要：當(dāng)一個(gè)內(nèi)聯(lián)元素想獲得就要使用這個(gè)屬性。下因?yàn)閷?dǎo)致的浮動(dòng)元素與普通元素之間產(chǎn)生代碼如下我是浮動(dòng)元素我是后面的文字，用來測(cè)試的正常情況下解決方式加一個(gè)的不只是文字，的浮動(dòng)元素也會(huì)和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關(guān)于BFC的文章粘貼過來，順便自己也再次做個(gè)總結(jié)。 最近看了一篇總結(jié)ie常見bug的文章，里面提...
摘要：當(dāng)一個(gè)內(nèi)聯(lián)元素想獲得就要使用這個(gè)屬性。下因?yàn)閷?dǎo)致的浮動(dòng)元素與普通元素之間產(chǎn)生代碼如下我是浮動(dòng)元素我是后面的文字，用來測(cè)試的正常情況下解決方式加一個(gè)的不只是文字，的浮動(dòng)元素也會(huì)和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關(guān)于BFC的文章粘貼過來，順便自己也再次做個(gè)總結(jié)。 最近看了一篇總結(jié)ie常見bug的文章，里面提...
摘要：子容器溢出時(shí)，父容器出現(xiàn)滾動(dòng)條。父容器或很顯然，子容器溢出時(shí)，被父容器截?cái)嗟那樾螣o法和父容器自適應(yīng)于子容器共存?，F(xiàn)在這個(gè)布局可以自動(dòng)生成，詳見林小志的小工具圖片垂直居中。溢出子容器溢出時(shí)會(huì)變成頂對(duì)齊，原因同上。 本文在evernote里有備份。如果evernote的閱讀區(qū)域嫌窄了，那么可以把這個(gè)鏈接拖入書簽并點(diǎn)擊javascript:jQuery(#container).width(9...
摘要：對(duì)象脫離常規(guī)流，偏移定位是以窗口為參考絕對(duì)定位的元素，在，，，屬性未設(shè)置時(shí)，會(huì)緊隨在其前面的兄弟元素之后，但在位置上不影響常規(guī)流中的任何元素。例如設(shè)置百分比時(shí)，子元素繼承是父元素乘以百分百之后的具體數(shù)值，所以可能會(huì)出現(xiàn)重疊現(xiàn)象。元素寬高 width,min-width,max-width等元素寬度設(shè)置百分比，以包含塊的寬度為標(biāo)準(zhǔn)進(jìn)行計(jì)算； height,min-height,max-hei...
閱讀 3061·2021-11-08 13:20
閱讀 1112·2021-09-22 15:20
閱讀 725·2019-08-30 15:53
閱讀 2034·2019-08-30 15:43
閱讀 1329·2019-08-29 17:21
閱讀 587·2019-08-29 12:15
閱讀 2434·2019-08-28 17:51
閱讀 3195·2019-08-26 13:26
