Html ：last child:before，列计数在chrome和firefox中表现不同 预期行为（Firefox）

意外事件（Chrome）

JSFiddle演示 （在Firefox和Chrome中试试看区别）

HTML 问题 为什么会发生这种情况？我如何用纯CSS修复它？是firefox bug还是chrome bug

---

注意：我在回答这个问题时发现了这个明显的错误：。

Chrome实际上提供了正确的行为。无序列表给出了

位置：相对

，因此该行将被定位为

绝对

，

相对

将

left:0

添加到

li:last child:before

将在firefox中产生相同的行为

---

是的，但是如果

左

位于

自动

，水平位置应该保持在原来的位置，如果它没有被定位。它不应该是

相对于
li
？我发现很奇怪，如果
li
有
display:inline
，则最后一个子项：before的位置绝对为ul，但如果它有
display:inline块，它的行为与此相对li@FranciscoPresencia李没有相对位置，为什么要在那里？绝对总是指向第一相对元素我不知道为什么，这就是为什么我问这个。。。您自己试试看：，。看起来chrome将列表视为一个单列，并基于此呈现伪元素，然后修改
列计数，更改其位置。
<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>

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