3

我有一个奇怪的问题，我的头部（h1、h2、h3、h4等）边距在我身上塌陷，但仅在 IE8 中。我花了很多时间试图查明我遇到的问题，并将其缩小到这个例子。

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

我尝试将其发布为 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 模式，因为我失去了其他功能（例如 pseudo-element :before）。

4

2 回答 2

2

这对你有用吗？

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

编辑：

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

于 2011-03-10T19:08:27.943 回答
2

凯尔给了我解决问题所需的信息，我已经接受了他的解决方案，因为他给了我解决我的具体案例的重要部分。为了便于搜索，我将在此处发布我的具体解决方案。

我对 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给我的，第三个没有包含在我的示例帖子中）产生了预期的输出。

于 2011-03-10T19:53:29.503 回答