：最后一子：之前的列数在Chrome和Firefox不同的行为

问题描述

（尝试在Firefox和Chrome看出差别）。

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

<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漏洞？

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.

推荐答案

Chrome浏览器实际上是给予正确的行为。无序列表给出的位置是：相对，所以该线路将被定位绝对，相对来UL认证。

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

添加左：0 到李：最后的孩子：前将给予在Firefox相同的行为

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

这篇关于：最后一子：之前的列数在Chrome和Firefox不同的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！