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