[SOLVED] IE8 - Odd behavior with head margin collapse on change in CSS "display"

IE8 - Odd behavior with head margin collapse on change in CSS "display"

I have a strange issue where my head (h1, h2, h3, h4, etc.) margins are collapsing on me, but only in IE8. I've spent a good deal of time trying to pinpoint the issue I am having, and have narrowed it down to this example.

I am almost completely certain that no other page objects can be removed (including the DOCTYPE declaration) while still representing this bug. To make the code as compact as possible, the bug only appears after modifying the display property a couple of times, but the real page has an issue each time the display property is modified (i.e. immediately after any "nav" is followed).

I attempted posting this as a jsFiddle, but it was not reproduceable from the result pane. Therefore, I will post the entire, simplified test case inline, written as small/clean as possible:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Bug Test of IE8 Collapsing Margin problem</title>
   <style type="text/css">
      h2 {
         margin:                20px 0 15px -10px;
         background:            red;
      } h3 {
         margin:                10px 0 15px -10px;
         background:            green;
      } h4 {
         margin-bottom:         -15px;
         background:            blue;
      } .noShow {
         display:               none;
      }
   </style>
   <script type="text/javascript">
      function show(theDiv) {
         theDiv   = document.getElementById(theDiv);
         Div1     = document.getElementById('div1');
         Div2     = document.getElementById('div2');
         Div1.style.display   = 'none';
         Div2.style.display   = 'none';
         theDiv.style.display = 'block';
      }
   </script>
</head>
<body>
   <ul>
      <li><a href="javascript: show('div1');">Nav1</a></li>
      <li><a href="javascript: show('div2');">Nav2</a></li>
   </ul>
   <div id="div1">
      <h1>Head1</h1>
      <h2>Head2</h2>
      <h3>Head3</h3>
      <h4>Head4</h4>
      <br><br>
      Click on "Nav2," then "Nav1," then "Nav2" a second time to see the shift
      in header margins/padding.<br>

   </div>
   <div id="div2" class="noShow">
      <h1>Head1</h1>
      <h2>Head2</h2>
      <h3>Head3</h3>
      <h4>Head4</h4>
   </div>
</body>
</html>

I've begun reading a bit about margin collapse and how it's supposed to act this way, but if that's the case, why is IE8 the only browser I've tested with this behavior, and why is it not consistent? I've also tried switching margin with padding to achieve a similar result without the collapsing issue, but unless I did something incorrectly, that had no effect either.

I've tried applying overflow:hidden to the noShow declaration. This fixes the problem, but I cannot use it in my design. (Even when adjusting this in the example, it looks wrong and is still inconsistent in its placement.)

Does anyone have any good suggestions on how to work around this problem? I'd hate to have to turn off my DOCTYPE and force IE7 mode, as I lose other features (such as pseudo-element :before).

Solution