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

发布于 2024-10-21 01:33:04 字数 2481 浏览 3 评论 0原文

我有一个奇怪的问题，我的头部（h1、h2、h3、h4 等）边距为我崩溃了，但仅限于 IE8。我花了很多时间试图找出我遇到的问题，并将其范围缩小到这个例子。

我几乎完全确定，在仍然表示此错误的同时，无法删除其他页面对象（包括 DOCTYPE 声明）。为了使代码尽可能紧凑，该错误仅在修改显示属性几次后才会出现，但每次修改显示属性时（即紧随任何“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 模式，因为我失去了其他功能（例如伪元素 :before）。

原文

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).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

素手挽清风 2024-10-28 01:33:04

这对你有用吗？

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

编辑：

< a href="http://jsfiddle.net/7qymJ/" rel="nofollow">http://jsfiddle.net/7qymJ/ - 在 IE8 中重现错误

回复收藏 0 原文

心在旅行 2024-10-28 01:33:04

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 给我的，第三个元素未包含在我的示例发布中）在预期输出中。

Kyle gave me the information I needed to get to my solution, and I have already accepted his solution, as he gave me the important parts to solve my specific case. For ease of searching, I will post my specific solution here.

I made simple modifications to the CSS, JS, and HTML in combination to achieve my desired result. Using the example I posted as a basis, I made the following changes:

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

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

In addition, my specific example had a div with multiple class assignments:

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

I modified this by removing the multiple class assignments and creating (yet another) nested div:

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

The combination of all 3 elements (of which two were given to me by Kyle, and the third was not included in my example posting) resulted in expected output.

回复收藏 0 原文

~没有更多了~