html - :last-child:before 列数在 chrome 和 firefox 中的行为不同

Question

预期行为 (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 bug还是chrome bug？

注意：我在回答这个问题时发现了这个明显的错误：Styling the first item in a css column。

Answer 1

Chrome 实际上给出了正确的行为。给定无序列表，position:relative因此行将定位到 ul。absoluterelative

添加left:0到li:last-child:before将在Firefox中给出相同的行为

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