Geek asks and answers

IE8 - Odd Behavior with Heading Breaking When Changing CSS Display "

I have a strange problem when my headers ( h1, h2, h3, h4etc.) change the field, but only in IE8. I spent a lot of time trying to determine what I have, and narrowed it down to this example.

I am pretty much sure that no other page objects can be deleted (including the ad DOCTYPE), still presenting this error. To make the code as compact as possible, an error appears only after changing the display property a couple of times, but on the real page there is a problem every time the display property changes (that is, immediately after the "nav" is executed).

I tried to post this as jsFiddle, but it was not played from the results pane. Therefore, I will post the entire simplified test case, 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 started reading a little about edge collapse and how it should act in this way, but if so, why is IE8 the only browser I tested with this behavior, and why is it inconsistent? I also tried switching margin with filling to achieve a similar result without a problem with ruins, but if I hadn’t done something wrong, that would also have no effect.

I tried applying overflow:hiddento the ad noShow. This fixes the problem, but I cannot use it in my design. (Even when setting this up in the example, it looks wrong and is still incompatible with the placement.)

- , ? DOCTYPE IE7 , (, :before).

+3
2

Kyle , , , . . .

CSS, JS HTML . , :

h2, h3, h4 {
   ...
   width: 100%;
}

function show(theDiv) {
   ...
   theDiv.style.Display = "inline-block";
}

, div :

<div id="div1" class="content">Initially Visible</div>
<div id="div2" class="content noShow">Initially Invisible</div>

, ( ) div:

<div class="content">
   <div id="div1">Initially Visible</div>
   <div id="div2" class="noShow">Initially Invisible</div>
</div>

( Kyle, ), .

+2

More articles:


All Articles