IE7渲染错误：标题在浮动列表之前

Question

Can somebody please explain this IE7 bug to me? 有人可以向我解释这个IE7错误吗？ It occurs in Standards and Quirks mode rendering, it does not occur in Firefox, Chrome or IE8 (though switching the rendering engine via IE8 developer tools will provoke it). 它发生在“标准和怪癖”模式渲染中，而不发生在Firefox，Chrome或IE8中（尽管通过IE8开发人员工具切换渲染引擎会引起这种情况）。 Here's the HTML to reproduce the behavior: 这是重现此行为的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        /* h1      { margin: 0px; } */
        ul      { padding: 0; margin: 0; list-style-type: none; }
        ul li   { float: left; width: 140px; padding: 3px; }
        div     { clear: left; padding: 3px; } 
        div, li { background-color: OrangeRed; }
        /* ul      { border: 1px solid blue; } */
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <ul>
      <li>bla 1</li><li>bla 2</li><li>bla 3</li>
    </ul>
    <div>yada</div>
</body>
</html>

This renders a floated <ul> above a <div> (supposed to be a tabbed user interface). 这将在<div> （假定是带选项卡的用户界面）上方呈现浮动的<ul> 。
There's an unexplained gap between the <div> and the <ul> . 在<div>和<ul>之间存在无法解释的差距。
Now do one of the following: 现在执行以下操作之一：
1. Uncomment the CSS rule for <h1> . 取消注释<h1>的CSS规则。 The gap disappears and the list is rendered tight to the <div> , but also very close to the <h1> . 差距消失，列表变得紧紧<div> ，但也非常接近<h1> 。
2. Alternatively, uncomment the CSS rule for <ul> . 或者，取消注释<ul>的CSS规则。 Now a narrow blue border is rendered above the <ul> , but the gap disappears. 现在，在<ul>上方呈现了一个狭窄的蓝色边框，但是该间隙消失了。

My questions: 我的问题：

How can the <h1> margin (I suppose any block level element with a defined margin will do) affect the space below the list? <h1>边距（我想任何具有定义的边距的块级元素都将起作用）如何影响列表下方的空间？
Can I prevent this from happening without having to set header margins to 0 or messing with the <ul> borders (setting border-width: 0; does not work BTW)? 是否可以在不必将标题页边距设置为0或弄乱<ul>边框（设置border-width: 0; BTW不起作用）的情况下防止这种情况的发生？

I suppose it is connected to the <ul> itself having no height because it has only floated children. 我想它连接到<ul>本身没有高度，因为它只有浮动的子代。 Maybe someone with more insight into IE7 peculiarities than I have can explain what the rendering engine is doing here. 也许比我更了解IE7特性的人可以在这里解释渲染引擎的工作。 Thanks! 谢谢！

Answer 1

It's the Incorrect Float Shrink-Wrap Bug . 这是错误的浮动收缩包装错误 。 The linked article explains the issue. 链接的文章解释了该问题。 It also affects IE6 btw. 它还会影响IE6 btw。

As Sjaak Priester, the person whom Gérard Talbot credits for the bug, reasons is that IE first renders the floated element on the same line as the previous float, then sees clear and clears it under but fails to redraw the text. 正如GérardTalbot认为该错误的人Sjaak Priester所说，原因是IE首先将浮动元素呈现在与上一个浮动元素相同的行上，然后看到并清除了下方的元素，但未能重新绘制文本。

One of the common solutions is the clearfix hack as answered by someone else here, or placing an empty clearing element after the block with the floats, like a <br style="clear:left;"> . 常见的解决方案之一是在这里被其他人回答的clearfix hack，或者在带有浮点的代码块之后放置一个空的clearfix元素，例如<br style="clear:left;"> 。 Put it between the ul and the div . 将其放在ul和div 。 This way IE will force the clear before reaching the div . 这样，IE将在到达div之前强制清除。

Answer 2

I've come up with a solution that is what seems like a good compromise. 我想出了一个似乎妥协的解决方案。 It's based on the fact that setting a border on the <ul> solves the problem, while the margin-bottom of the preceding-sibling block-level element obviously causes it. 它基于这样的事实：在<ul>上设置边框可以解决问题，而先前的同级块级元素的margin-bottom显然会导致此问题。

So setting a border-top: 1px solid transparent; 因此设置一个border-top: 1px solid transparent; on the <ul> displaces it by merely one pixel, which is okay with me. 在<ul>仅将其移位一个像素，我也可以。 As BalusC rightly points out in the comments, setting margin-top: -1px; 正如BalusC在注释中正确指出的那样，将margin-top: -1px;设置margin-top: -1px; would counteract the displacement. 将抵消位移。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        ul      { padding: 0; margin: 0; border-top: 1px solid transparent; list-style-type: none; }
        ul li   { float: left; width: 140px; background-color: red; }
        div     { clear: left; background-color: red; } 
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <ul>
      <li>bla 1</li><li>bla 2</li><li>bla 3</li>
    </ul>
    <div>yada</div>
</body>
</html>

I admit that this is a bit of hackery, too; 我承认这也有点黑客。 it requires remembering what the bogus border is for, which is not much better than the usual CSS tricks (but a little). 它需要记住虚假的边界是什么，这并没有比通常的CSS技巧好多少（但有一点）。

Previous version of the answer: I've fixed it like this for now (seems it works across browsers and does not require CSS hackery) 答案的先前版本：我现在已经像这样修复了它（似乎可以在浏览器中使用，并且不需要CSS hackery）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        div.t ul    { padding: 0; margin: 0; list-style-type: none; }
        div.t ul li { float: left; width: 140px; background-color: red; }
        div.c       { background-color: red;  } 
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <div class="t">
      <ul>
        <li>bla 1</li><li>bla 2</li><li>bla 3</li>
      </ul>
      <br style="clear: left;">
    </div>
    <div class="c">yada</div>
</body>
</html>

I don't like this solution very much because the of the extra elements it requires. 我不太喜欢这种解决方案，因为它需要额外的元素。 But I dislike dirty CSS tricks even more. 但是我更讨厌肮脏的CSS技巧。

Answer 3

That's a really bizarre problem, IE seems to be full of these delights. 这是一个非常奇怪的问题，IE似乎充满了这些乐趣。 I haven't found out exactly why it's deciding to render like that but with proper clearing of the floats you can usually avoid all of this trouble. 我还不确定为什么要决定那样渲染，但是通过适当清除浮点数，通常可以避免所有这些麻烦。 The following code seems to give some consistency (in other words it's the same with or without the H1 css rule). 以下代码似乎提供了一些一致性（换句话说，无论是否使用H1 css规则，它都是相同的）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
     <style type="text/css">
        h1      { margin: 0px; }
        ul      { padding: 0; margin: 0; list-style-type: none;}
        ul li   { float: left; width: 140px; padding: 3px; }
        div, li { background-color: OrangeRed; }
        ul      { border: 1px solid blue; }
        .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }

        .clearfix {display: inline-block;}  /* for IE/Mac */
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <div class="clearfix">
      <ul class="t">
        <li>bla 1</li><li>bla 2</li><li>bla 3</li>
      </ul>
    </div>
    <div>yada</div>
</body>

IE7渲染错误：标题在浮动列表之前

问题描述

3 个解决方案

解决方案1
1 2010-04-30 23:31:46

解决方案2
1 已采纳 2010-04-30 23:47:37

解决方案3
0 2010-04-30 23:22:53

IE7渲染错误：标题在浮动列表之前

问题描述

3 个解决方案

解决方案1 1 2010-04-30 23:31:46

解决方案2 1 已采纳 2010-04-30 23:47:37

解决方案3 0 2010-04-30 23:22:53

解决方案1
1 2010-04-30 23:31:46

解决方案2
1 已采纳 2010-04-30 23:47:37

解决方案3
0 2010-04-30 23:22:53