Question

我有一个奇怪的问题，我的头（h1，h2，h3，h4等）边距正在崩溃，但仅限于IE8。我花了很多时间来确定我遇到的问题，并将其缩小到这个例子。

我几乎完全确定在表示此错误的同时，不能删除其他页面对象（包括DOCTYPE声明）。为了使代码尽可能紧凑，只有在修改display属性几次后才会出现错误，但每次修改display属性时（即紧跟任何“nav”之后），真实页面都会出现问题。 / p>

我尝试将其发布为jsFiddle，但无法从结果窗格中重现。因此，我将内联的整个简化测试用例发布为尽可能小/干净：

<!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>

我已经开始阅读一些关于保证金崩溃以及它应该如何采取行动的方式，但如果是这样的话，为什么IE8是我用这种行为测试的唯一浏览器，为什么它不一致？我也尝试使用填充来切换边距以获得类似的结果，而不会出现崩溃问题，但除非我做错了什么，否则也没有效果。

我尝试将overflow:hidden应用于noShow声明。这解决了问题，但我不能在我的设计中使用它。（即使在示例中进行调整时，它看起来也是错误的，并且其位置仍然不一致。）

有没有人对如何解决这个问题有任何好的建议？我不得不关掉我的DOCTYPE并强制使用IE7模式，因为我丢失了其他功能（例如伪元素:before）。

Answer 1

这对你有用吗？

http://jsfiddle.net/7qymJ/1/

修改

http://jsfiddle.net/7qymJ/ - 在IE8中重现您的错误

Answer 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>

所有3个元素的组合（其中两个元素由Kyle提供给我，第三个元素未包含在我的示例发布中）导致预期输出。

IE8 - CSS“显示”更改时头部边缘崩溃的奇怪行为

2 个答案: