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

【问题标题】：:last-child:before with column-count behaving differently in chrome and firefox:last-child:before 列数在 chrome 和 firefox 中的行为不同
【发布时间】：2013-10-18 15:07:51
【问题描述】：

预期行为 (Firefox)

意外（Chrome）

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。

【问题讨论】：

标签： html css browser pseudo-element pseudo-class

【解决方案1】：

Chrome 实际上给出了正确的行为。无序列表给定position:relative，所以该行将定位absolute，relative到ul。

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

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

【讨论】：

是的，但是如果left 留在auto 处，水平位置应该保持在未定位的位置。
不应该是relative到li吗？我在this jsfiddle 中发现很奇怪，如果li 具有display: inline，则last-child:before 绝对定位于ul，但如果它具有display: inline-block;，则它的行为相对于那个li
@FranciscoPresencia li 没有相对位置，那它为什么要在那里呢？绝对总是指向第一个相对元素
我不知道为什么，这就是我问这个的原因......你自己试试吧：display:inline fiddle，display:inline-block fiddle。
看起来chrome将列表视为单列并基于此呈现伪元素，然后对column-count进行修改，更改其位置。