IE7 渲染错误：浮动列表前的标题答案

【问题标题】：IE7 rendering bug: Heading before a floated listIE7 渲染错误：浮动列表前的标题
【发布时间】：2010-04-30 22:47:00
【问题描述】：

有人可以向我解释一下这个 IE7 错误吗？它发生在标准和 Quirks 模式渲染中，它不会发生在 Firefox、Chrome 或 IE8 中（尽管通过 IE8 开发人员工具切换渲染引擎会引发它）。这是重现该行为的 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>

这会在<div> 上方呈现一个浮动的<ul>（应该是一个选项卡式用户界面）。
<div> 和 <ul> 之间存在无法解释的差距。
现在执行以下操作之一：
1. 取消注释 <h1> 的 CSS 规则。差距消失了，列表呈现为紧贴<div>，但也非常接近<h1>。
2. 或者，取消注释 <ul> 的 CSS 规则。现在，<ul> 上方呈现了一个狭窄的蓝色边框，但间隙消失了。

我的问题：

<h1> 边距（我想任何具有定义边距的块级元素都可以）如何影响列表下方的空间？
我是否可以在不必将页眉边距设置为 0 或弄乱<ul> 边框的情况下防止这种情况发生（顺便说一句，设置border-width: 0; 不起作用）？

我想它连接到 <ul> 本身没有高度，因为它只有漂浮的孩子。也许比我更了解 IE7 特性的人可以解释渲染引擎在这里做什么。谢谢！

【问题讨论】：

标签： html css internet-explorer-7 css-float

【解决方案1】：

这是Incorrect Float Shrink-Wrap Bug。链接的文章解释了这个问题。顺便说一句，它也会影响 IE6。

作为 Sjaak Priester，Gérard Talbot 认为该错误的人，原因是 IE 首先将浮动元素呈现在与前一个浮动相同的行上，然后看清并将其清除，但未能重绘文本。

其中一个常见的解决方案是clearfix hack，正如其他人在这里回答的那样，或者在带有浮动块的块之后放置一个空的清除元素，例如 <br style="clear:left;">。把它放在ul 和div 之间。这样IE会在到达div之前强制清除。

【讨论】：

很抱歉display: inline; 不起作用，因为<li> 失去了宽度。
我忽略了那一点，抱歉，这只是从头顶上。我更新了答案。
+1 供您洞察。不过，我不确定这是否是正确的错误……？它说“[...] 浮动在浮动之前并且设置了 clear 不能正确收缩包装” - 我的样本中没有符合该描述的元素，或者我吗？
但清除的元素不会隐式浮动。所以<div> 与描述不符。另外，我不确定不正确的收缩包装是否是实际问题，因为渲染看起来不错，而不是重复前一个兄弟的边距。

【解决方案2】：

我想出了一个看似不错的折衷方案。这是基于在<ul> 上设置边框可以解决问题，而前面的兄弟块级元素的margin-bottom 显然会导致问题。

所以在<ul> 上设置border-top: 1px solid transparent; 只会将其位移一个像素，这对我来说没问题。正如 BalusC 在 cmets 中正确指出的那样，设置 margin-top: -1px; 将抵消位移。

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

我承认这也有点骇人听闻；它需要记住虚假边框的用途，这并不比通常的 CSS 技巧好多少（但有点）。

答案的上一版本：我现在已经这样修复了（似乎它可以跨浏览器工作，并且不需要 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">
        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>

我不太喜欢这个解决方案，因为它需要额外的元素。但我更不喜欢肮脏的 CSS 技巧。

【讨论】：

这并不能解决问题。 <div class="t"> 实际上是不必要的，您需要将清除 <div> 替换为具有相同样式的 <br>。另请参阅我的更新答案。
@BalusC: 嗯，但是确实似乎为我解决了这个问题，我已经测试过了。我不确定<br> 会给我买什么——为什么不能是<div>？
确切的 sn-p 在 IE6/7 中仍然存在同样的问题。我复制粘贴并测试了它。新的解决方案也是一个不错的解决方案。顺便说一句，您可以使用margin-top: -1px; 来抵消边界。
@BalusC：你说得对，它适用于<br>，但不适用于<div>，我会更新我的答案。关于margin-top 的好提示。有没有 CSS 条件 cmets 之类的东西？
你可以找到几个here。

【解决方案3】：

这真是一个奇怪的问题，IE 似乎充满了这些乐趣。我还没有确切地知道为什么它决定这样渲染，但是通过适当地清除浮动，您通常可以避免所有这些麻烦。下面的代码似乎给出了一些一致性（换句话说，不管有没有 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>

【讨论】：

很抱歉，这并没有给我正确的结果。 “选项卡行”使用此解决方案跨越整个页面，但它应该只有三个选项卡宽。你能在这方面调整答案吗？