:last-child:before with column-count behaving differently in chrome and firefox

问题

The expected behaviour (Firefox)

The unexpected (Chrome)

The JSFiddle demo

http://jsfiddle.net/bZaKK/ (try it in Firefox and Chrome to see the difference).

The 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>

The 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%;
  }

The question

Why is this happening and how can I fix it with pure CSS? Is it a firefox bug or chrome bug?

Note: I found this apparent bug while answering this question: Styling the first item in a css column.

回答1:

Chrome is actually giving the proper behaviour. The unordered list is given position:relative, so the line will be positioned absolute, relative to ul.

Adding left:0 to li:last-child:before will give the same behaviour in firefox

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

来源：https://stackoverflow.com/questions/19302836/last-childbefore-with-column-count-behaving-differently-in-chrome-and-firefox

标签

html