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

发布于 2024-08-30 19:02:22 字数 1785 浏览 5 评论 0原文

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

这会在
上方呈现一个浮动的
和
现在执行以下操作之一：
1. 取消注释
  的 CSS 规则。间隙消失，列表呈现为紧靠
  ，但也非常接近
  。
2. 或者，取消注释

我的问题：

边距（我想任何具有定义边距的块级元素都可以）如何影响列表下方的空间？
我可以防止这种情况发生，而不必将标题边距设置为 0 或弄乱

我想它连接到

原文

Can somebody please explain this IE7 bug to me? 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). Here's the HTML to reproduce the behavior:

<!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).
There's an unexplained gap between the <div> and the <ul>.
Now do one of the following:
1. Uncomment the CSS rule for <h1>. The gap disappears and the list is rendered tight to the <div>, but also very close to the <h1>.
2. Alternatively, uncomment the CSS rule for <ul>. Now a narrow blue border is rendered above the <ul>, but the gap disappears.

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

I suppose it is connected to the <ul> itself having no height because it has only floated children. Maybe someone with more insight into IE7 peculiarities than I have can explain what the rendering engine is doing here. Thanks!

分享到QQ

分享到微博

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

发布评论

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

眉目亦如画i 2024-09-06 19:02:22

这是不正确的浮动收缩包装错误。链接的文章解释了这个问题。顺便说一句，它也会影响 IE6。

正如 Gérard Talbot 认为造成该错误的人 Sjaak Priester 所说，原因是 IE 首先将浮动元素呈现在与前一个浮动元素相同的行上，然后看清并清除其下方的元素，但无法重绘文本。< /p>

常见的解决方案之一是由其他人回答的 clearfix hack，或者在带有浮动的块后面放置一个空的清除元素，例如

回复收藏 0 原文

泪之魂 2024-09-06 19:02:22

我想出了一个解决方案，这似乎是一个很好的折衷方案。它基于这样一个事实：在

margin-bottom

因此，在

border-top: 1px Solid transparent;

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

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

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.

So setting a border-top: 1px solid transparent; on the <ul> displaces it by merely one pixel, which is okay with me. As BalusC rightly points out in the comments, setting 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).

Previous version of the answer: I've fixed it like this for now (seems it works across browsers and does not require 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.

回复收藏 0 原文

面如桃花 2024-09-06 19:02:22

这真是一个奇怪的问题，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>

That's a really bizarre problem, IE seems to be full of these delights. 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).

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

回复收藏 0 原文

~没有更多了~