Question

在HTML 5文档中，我试图使用float：left左右并排放置两个前置元素：

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>

<body>
<pre style="float:left; margin-right:1em"> 1
 2
 3
 4</pre>
<pre>The quick
red fox
jumped over
the lazy brown dog.</pre>
</body>
</html>

＆＃13;

Internet Explorer 9以我预期的方式呈现HTML，左前pre元素的顶部与另一个pre元素的顶部对齐，如下所示：

An HTML document with two pre elements rendered in Internet Explorer 9

然而，谷歌浏览器和Firefox都会渲染文档，其中前置文件左侧浮动一行比另一行低，如下所示：

An HTML document with two pre elements rendered in Google Chrome

An HTML document with two pre elements rendered in Firefox

鉴于Internet Explorer的历史，我不得不相信Chrome和Firefox正确遵循标准。更有趣的是，当我用div元素替换pre元素并在每行的末尾使用<br>标记时，如下所示：

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>

<body>
<div style="float:left; margin-right:1em"> 1<br>
 2<br>
 3<br>
 4</div>
<div>The quick<br>
red fox<br>
jumped over<br>
the lazy brown dog.</div>
</body>
</html>

＆＃13;

左边的div不会向下移动：

An HTML document with two div elements rendered in Google Chrome

为什么标准要求左前置下移？如何阻止Chrome和Firefox向左移动？我知道如何用CSS解决它＆＃34; position：relative;顶部：-1em＆＃34;，但这似乎是一个等待破解的黑客。是否有更好的方法可以阻止Chrome和Firefox向左移动？

Answer 1

为什么标准要求左前置下移？

它没有。区别在于用户代理样式表＆＃39;。 Firefox和Chrome都使用：

pre {
  margin:1em 0;
}

由于浮动元素由于浮动本身而不再是流动的一部分，因此其上边距不能与身体上的默认边距折叠（此处我的Chrome中为8px）。然而，非浮动元素，以及它的边缘correctly collapses，使其更高 - 准确地说1em和8px之间的差异。

所引用的浏览器都不是“错误”，除了特殊的无意义元素<div>和<span>之外，对于用户代理样式表中的此类细节没有严格的规则，它们的定义应该没有任何样式，特别是边距或填充。因此，当用div替换时，元素会按预期呈现。

IE9并没有错，只是不同。显然，它在以后的版本中被更改为更符合其他主要浏览器。

Answer 2

如果你想要两个元素并排浮动则不需要。给定父元素的大小，您可以将两个子元素的宽度设置为小于父元素的总和。然后将子元素设置为display:inline-block;您将发现元素将以正确的顺序并排。如果子元素的总宽度大于父元素的宽度，则子元素将被推送到下一行。计算元素的宽度时，必须将边框和边距添加到元素的宽度。计算元素的内部宽度时，必须计算宽度减去左右填充。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>
<style>
#elmOne{
margin-right:1em;
}
#elmOne, #elmTwo{
display:inline-block;
}
</style>

<body>
<pre id="elmOne"> 1
 2
 3
 4</pre>
<pre id="elmTwo">The quick
red fox
jumped over
the lazy brown dog.</pre>
</body>
</html>

您很少需要使用浮动。大多数情况下，当你想使用浮点数时，你可以用位置来做：[relative，fixed，absolute];不要把你的自己放在地狱里。

如果您想要的只是一个项目列表并且项目编号，那么您不需要并排使用两个元素。 http://www.echoecho.com/htmllists02.htm

您可以使用：

<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>

pre标记用于以固定宽度字体显示，并保留空格和换行符。不用于列表但用于文本布局。 http://www.w3schools.com/tags/tag_pre.asp

Answer 3

尝试删除某些浏览器上pre可能具有的边距：

pre {
    margin: 0;
}

＆＃13;

pre {
  margin: 0;
}

＆＃13;

<pre style="float:left; margin-right:1em"> 1
 2
 3
 4</pre>
<pre>The quick
red fox
jumped over
the lazy brown dog.</pre>

＆＃13;

在这种情况下，只需删除margin-top即可。

另请考虑使用此CSS重置：*{margin:0; padding:0;}

为什么float：left会导致pre元素向下移动一行

3 个答案: