0

予想される動作 (Firefox)

予想される動作

予想外 (クローム)

間違った振る舞い

JSFiddle デモ

http://jsfiddle.net/bZaKK/ (Firefox と Chrome で試して違いを確認してください)。

HTML

<ul>
  <li><a href="">List item 1</a></li>
  <li><a href="">List item 2</a></li>
  ...
  <li><a href="">List item 9</a></li>
</ul>

CSS

ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  }

li:last-child:before {
  position: absolute;
  content: " ";
  display: block;
  background-color: red;
  height: 1px;
  top: -1px;
  width: 100%;
  }

質問

なぜこれが起こっているのですか?純粋な CSS で修正するにはどうすればよいですか? それはFirefoxのバグですか、それともChromeのバグですか？

注:この質問に回答しているときに、この明らかなバグを見つけました: Styling the first item in a css column。

4

1 に答える 1

0

Chrome は実際に適切な動作をしています。順序なしリストが与えられposition:relativeているので、行はul に配置されますabsolute。relative

に追加left:0するli:last-child:beforeと、Firefox でも同じ動作になります

http://jsfiddle.net/bZaKK/2/

于 2013-10-10T18:11:02.300 に答える