为什么float:left会导致pre元素向下移动一行
在HTML 5文档中,我试图使用float放置两个前置元素:left,如下所示:
<!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>Internet Explorer 9以我预期的方式呈现HTML,左前pre元素的顶部与另一个pre元素的顶部对齐,如下所示:
但是,谷歌浏览器和Firefox都会使文件显示左侧浮动的文件大约比另一条文件低一行,如下所示:
鉴于Internet Explorer的历史,我不得不相信Chrome和Firefox正确遵循标准.更有趣的是,当我用div元素替换pre元素并<br>在每行的末尾使用标签时,如下所示:
<!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>左边的div不会向下移动:
为什么标准要求左前置下移？如何阻止Chrome和Firefox向左移动？我知道如何使用CSS"position:relative; top:-1em"解决它,但这似乎是一个等待破解的黑客.是否有更好的方法可以阻止Chrome和Firefox向左移动？
为什么标准要求左前置下移？
它没有.区别在于"用户代理样式表".Firefox和Chrome都使用:
pre {
margin:1em 0;
}
由于浮动元素由于浮动本身而不再是流动的一部分,因此其上边距不能与身体上的默认边距折叠(此处我的Chrome中为8px).然而,非浮动元素,并且其边缘因此正确地折叠,使其更高 - 准确地说1em和8px之间的差异.
引用的浏览器都不是"错误"的,也有在用户代理样式表这样的细节没有严格的规定-除特殊意义的元素<div>和<span>,这应该定义本身就没有花式,特别是保证金或填充.因此,当用div替换时,元素按预期呈现.
IE9没有错,只是不同.显然它在以后的版本中被更改为更符合其他主要浏览器.