IE8 display：none;顯示：block;導致div重疊頁腳？

我有出現上面看起來像IE8 display：none;顯示：block;導致div重疊頁腳？

<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>

而一個<form>內形成具有divs裏面一堆的投入......沒有什麼不尋常的錯誤形式。

但我對我的字段進行了javascript驗證，將格式錯誤從display:none;改爲display:block;，這樣可以調整容器字段的大小。問題在於事實上有一個不下移的頁腳（也在div內）。如果我打開IE8開發人員並查看主容器（包裝所有內容），它也不會擴展。例如，如果我取消選中主容器寬度樣式，然後重新檢查它，它會修復所有內容。

有沒有辦法強制IE8「調整」他們的div時，當div內的元素從display：none;顯示：block;

PS。有沒有有趣的CSS，沒有花車，沒有絕對的定位，沒有什麼會導致此...

格式錯誤塊CSS

.form-error { 
    color: #EB1F25; 
}

頁腳塊CSS

.footer-wrapper { 
    border-top: 1px solid #000000; 
    margin: 30px 0 10px 0; 
} 
.footer-wrapper .links { 
    width: 960px; 
}

一些調查後，看起來容器上的inline-block屬性導致了這個問題。

來源

2012-09-07 Steven

向我們展示您的標記和您的CSS的其餘部分，我們可能會幫助您（強烈建議使用www.jsfiddle.net示例） – Tom

..也請勿使用內聯樣式。你已經爲錯誤框設置了一個ID，所以使用它並把'#optin_error {display：none; }'在你的樣式表中 – Tom

嗨！你使用css3PIE嗎？ –

結束了顯示問題：inline-block;元素不調整大小。更改爲浮動工作。

來源

2012-09-08 02:59:35 Steven

嘗試安裝寬度的包裝。記住頁腳應該在你的主包裝裏面，還要給其他div的高度......最小高度或類似的東西。

.footer-wrapper { 
border-top: 1px solid #000000; 
margin: 30px 0 10px 0; 
width: 960px; 
} 
.footer-wrapper .links { 
    width : 100px; 
}

來源

2012-09-07 14:33:59 pl4g4

很難分辨究竟是什麼問題。但是，你可以測試出一些這方面的技巧，我建議你去嘗試的：

如果您.form-error正顯示出前（上圖）了實際<form ...></form>，然後嘗試插入這兩個塊之間的<br clear="all"/>標籤。如果不是，則將clear:all添加到<form ...>和width:100%到.form-error。

如果不是，則首先將position:relative和overflow:hidden加到.form-error，如果沒有幫助，也將它加到<form...>。

前面已經說過，會容易得多，如果我們可以看到整個代碼，嘗試用你的整個CSS和HTML源代碼使用jsbin，因爲IE是HTML渲染非常嚴格。

來源

2012-09-07 14:44:05 aspirinemaga

IE8 display：none;顯示：block;導致div重疊頁腳？

回答

相關問題