資訊專欄INFORMATION COLUMN
摘要：的是，被的覆蓋，最終的高度值為計算值。這里所有的瀏覽器都計算正確。
本文源自對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/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 2958·2021-11-08 13:20
閱讀 1031·2021-09-22 15:20
閱讀 660·2019-08-30 15:53
閱讀 1964·2019-08-30 15:43
閱讀 1278·2019-08-29 17:21
閱讀 540·2019-08-29 12:15
閱讀 2375·2019-08-28 17:51
閱讀 3142·2019-08-26 13:26
