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

2023年10月12日 183次阅读

有人可以向我解释这个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>

>这使得浮动的< ul>在< div>之上(应该是一个标签式用户界面).
>< div>之间存在无法解释的差距.和< ul>.
>现在执行以下操作之一：

>取消注释< h1>的CSS规则.间隙消失,列表紧靠< div>,但也非常接近< h1>.
>或者,取消注释< ul>的CSS规则.现在,在< ul>上方呈现了一个窄的蓝色边框,但是间隙消失了.

我的问题：

>怎么能< h1> margin(我认为任何具有已定义边距的块级元素都会影响)列表下方的空间？
>我可以防止这种情况发生,而不必将标题边距设置为0或弄乱< ul>边框(设置border-width：0; BTW不起作用)？

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

最佳答案 它是
Incorrect Float Shrink-Wrap Bug.链接的文章解释了这个问题.它也影响IE6顺便说一句.

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.

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

点赞