Any solution to IE8 bug rendering error when hiding elements?
- by Magnar
Bug: when hiding an element with JavaScript in IE8, the margin of still-visible other elements on the side is ignored.
This bug has been introduced with IE8, since it works as expected in IE6+7 (and other browsers).
<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>
When running this code, notice how a and c have a margin of 8 between them in normal browsers, but a margin of 0 in IE8.
Remove the padding, and IE8 behaves like normal.
Remove the timeout and IE8 behaves like normal.
A border behaves the same way.
I've been working with IE-bugs the last 10 years, but this has me stumped. The solution for now is to wrap the divs, and apply the margin to the outer element and other styles to the inner. But that's reminicent of horrible IE6-workarounds.
Any better solutions?
