gpt4 book ai didi

html - IE7 渲染错误 : Heading before a floated list

转载 作者:搜寻专家 更新时间:2023-10-31 08:49:26 25 4
gpt4 key购买 nike

有人可以向我解释一下这个 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>
  • 这会呈现一个 float 的 <ul><div>之上(应该是一个选项卡式用户界面)。
  • <div> 之间存在无法解释的差距和 <ul> .
  • 现在执行以下操作之一:
    1. 取消注释 <h1> 的 CSS 规则.差距消失,列表变得紧致 <div> ,也非常接近 <h1> .
    2. 或者,取消注释 <ul> 的 CSS 规则.现在,在 <ul> 上方呈现了一个蓝色窄边框。 , 但差距消失了。

我的问题:

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

我想它连接到 <ul>本身没有高度,因为它只有 float 的 child 。也许比我更了解 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就像其他人在这里回答的那样破解,或者在带有 float 的 block 之后放置一个空的清除元素,比如 <br style="clear:left;"> .把它放在 ul 之间和 div .这样 IE 将在到达 div 之前强制清除.

关于html - IE7 渲染错误 : Heading before a floated list,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2748114/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com