IE8錯誤與最小高度和溢出：隱藏？

在IE8和之後，Chrome/Firefox的/ IE9 +。你會注意到，在IE8中，儘管事實上它只是#outer即overflow:hidden，但內部藍色div在最外面的#slicer div的邊緣被切掉。如果我將#outer上的min-height更改爲明確的height，問題就會消失。

這個例子看起來很有意思，但僅僅是因爲我已經簡化了它。我在一個真實的項目中遇到了這個問題，這讓我很頭疼，因爲我改變佈局原則的範圍有限 - 其他依賴關係太多。我在這裏尋找兩件事：

這是一個已知的錯誤嗎？這個問題最簡單的說法是什麼？我仍然不覺得我真的明白導致IE8出錯的基本錯誤;它仍然不是一個特別簡單的測試案例。
是否有解決方法，不涉及更改#outer和#slicer的樣式？在我的真實世界的例子中，這些是更大的頁面框架的一部分，我將遇到麻煩更改，而#inner位更容易在我的控制之下。

（更新）最初的例子是非常人爲設法儘量減少。我在這裏創建了一個新的JSFiddle：http://jsfiddle.net/symposion/NDa6U/，它可以讓您更好地瞭解現實世界的問題。如果您在IE8中調整html窗格的大小，您將注意到最終綠色內容部分開始被錯誤切斷。我期待的是這部分保持它所包含div的高度的100％，理想情況下不需要對#innerContainer以外的其他任何重大更改。但說實話，我會對任何保留基本佈局原則（底部從定義的像素位置擴展到離頁面底部定義的距離但具有最小高度）的解決方案感興趣在IE8中。

來源

2012-11-22 hollandlef

測試用例很有用，但很難知道我可以如何安全地改變這種人爲的測試用例。例如，是否有一個原因：'＃inner'必須正好具有'height：120％'？爲什麼不只是'身高：500％'？ – thirtydot

@thirtydot是的，我很抱歉，我正在努力簡化錯誤表現出來的場景，但卻造成了一個相當模糊的測試用例。我願意接受任何關於#inner的建議，但理想情況下，面對特定維度的變化，它會隱約可靠。我將嘗試構建一個更加複雜的示例，以更準確地表示真實世界的約束條件，並且我將把那個舊的留給那些有興趣闡明底層瀏覽器錯誤的人。 – hollandlef

@thirtydot如果您仍然感興趣，請嘗試新示例。這是一個更現實的，應該給你更多的感覺，我想要實現的。 – hollandlef

http://jsfiddle.net/thirtydot/NDa6U/22/怎麼樣？

#innerContainer { 
    padding-bottom: 9999px; 
    margin-bottom: -9999px; 
}

這裏的一些（相對）舊的背景有關此技術的信息：http://www.positioniseverything.net/articles/onetruelayout/combined

從個人的經驗，它適用於所有現代瀏覽器，沒有任何問題。

來源

2012-11-23 10:44:51 thirtydot

這很好，儘管我很久以前都不記得看過那篇文章，但我顯然沒有考慮到你在這裏申請的原則。我贊成你，因爲這是一個很好的技術，但我不接受答案，因爲它有一個重大的缺點 - 它只推遲了這個問題。如果我將任何內容放在使用相對大小的內容中（例如嘗試使用100％高度的div），它仍然會遇到同樣的問題 - 它會被截斷，就好像min-height屬性從未設置過一樣： - （ – hollandlef

我想我需要看你的完整頁面來幫助。測試用例從未與你的實際頁面完全匹配:) – thirtydot

你可能想要考慮使用JavaScript（僅在IE8中）來解決顯然是結果的問題的IE8錯誤。你是否真的需要支持使用IE8 *和*禁用JavaScript的用戶中很小比例的用戶？ – thirtydot

IE8錯誤與最小高度和溢出：隱藏？

回答

相關問題