隱藏元素時IE8錯誤呈現錯誤的任何解決方案？

錯誤：在IE8中使用JavaScript隱藏元素時，頁面上仍然可見的其他元素的邊距將被忽略。隱藏元素時IE8錯誤呈現錯誤的任何解決方案？

IE8引入了這個錯誤，因爲它在IE6 + 7（和其他瀏覽器）中按預期工作。

<html> 
<head> 
    <style> 
     #a, #b, #c, #d {background: #ccf; padding: 4px; margin-bottom: 8px;} 
    </style> 
</head> 
<body> 
    <div id="a">a</div> 
    <div id="b">b</div> 
    <div id="c">c</div> 
    <div id="d">d</div> 
    <script> 
     setTimeout(function() { 
      document.getElementById("b").style.display = "none"; 
     }, 1000); 
    </script> 
</body> 
</html>

運行此代碼，請注意a和c有它們之間8在正常的瀏覽器保證金，但0 IE8的餘量。

刪除填充，IE8的行爲就像正常。
刪除超時和IE8行爲正常。
邊框的行爲方式相同。

過去10年來我一直在使用IE-bugs，但是這讓我很難過。現在的解決方案是包裝divs，並將邊界應用於外部元素和其他樣式到內部。但是，這讓人想起了可怕的IE6解決方法。

任何更好的解決方案？

編輯：我向IE9團隊提交了一張票，現在該錯誤已在IE9中修復。希望他們能夠將它支持到IE8。

來源

2010-06-08 Magnar

我無法在IE8（v。8.0.7600.16385）中重現該錯誤。我顯示了與其他瀏覽器類似的正確結果。 – 2010-06-08 08:46:41

這是一個有趣的。嗯...... – edl 2010-06-08 09:02:15

這個bug每次都在我的IE8（v.8.0.6001.18094）以及IE9預覽中發揮它的魔力。 – Magnar 2010-06-08 09:26:23

這一個讓我很難找到一個真正的解決方案。對於一個hacky解決方法，您可以將marginBottom重置爲8px。顯然，設置顯示：無需刪除邊距。要驗證，請嘗試：

setTimeout(function() { 
     document.getElementById("b").style.display = "none"; 
     document.getElementById("a").style.marginBottom="8px"; 
    }, 1000);

來源

2010-06-08 09:08:54 edl

edl的解決方案的增強可能是自動選擇並應用上一個元素的margin-bottom。這樣您就不必選擇（並記住）元素ID和分配的邊距。

setTimeout(function() { 
    var e = document.getElementById("b"); 
    e.style.display = "none"; 

    var prevSibling = e.previousSibling; 
    prevSibling.style.marginBottom = prevSibling.currentStyle.marginBottom; 
}, 1000);

您可能需要檢查前面的元素是否存在/是錯誤的一部分。

來源

2010-06-08 09:45:47

隱藏元素時IE8錯誤呈現錯誤的任何解決方案？

回答

相關問題