我注意到 Google Chrome 和 IE 10 中的 CSS 列并不总是在顶部统一对齐。
页面来源是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Headings in CSS Columns</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
#container {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
</head>
<body>
<div id="container">
<h2>Lorem</h2>
<p>
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius. Claritas est etiam processus dynamicus, qui
sequitur mutationem consuetudium lectorum. Mirum est notare
quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima. Eodem modo typi, qui nunc nobis
videntur parum clari, fiant sollemnes in futurum.
</p>
<h2>Sed ut</h2>
<p>
perspiciatis, unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa,
quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia
voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos, qui ratione voluptatem sequi nesciunt,
neque porro quisquam est, qui dolorem ipsum, quia dolor sit
amet, consectetur, adipisci[ng] velit, sed quia non numquam [do]
eius modi tempora inci[di]dunt, ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit,
qui in ea voluptate velit esse, quam nihil molestiae consequatur,
vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus,
qui blanditiis praesentium voluptatum deleniti atque corrupti,
quos dolores et quas molestias excepturi sint, obcaecati cupiditate
non provident, similique sunt in culpa, qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem
</p>
</div>
</body>
</html>
如果删除 h2 元素并合并段落,则列顶部的错位仍然存在。
这种错位是否有充分的理由,还是 CSS 实现中的错误/故障?