3

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 実装のバグ/グリッチですか?

4

4 に答える 4

2

このcssを適用します

 h2
{
    margin:0;
}

h2したがって、基本的にはタグをリセットする必要があります

ワーキングコードペン

于 2013-03-26T11:35:10.867 に答える
0

これを試して

 <h2 style="margin:0;">Lorem</h2>
于 2013-03-26T11:38:35.567 に答える
0

</p>2番目の列にaを追加すると役立ちますか

   <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>
于 2013-03-26T11:25:28.930 に答える