在 Firefox 中使用列时右侧浮动元素消失

Right floated element disappears when using columns in Firefox

我正在使用具有 column-count 和 column-gap 属性的 ol 元素在 2 列中显示列表。每个列表项都有一个向右浮动的 span 元素，下图中的某些项目（例如 3 和 4）不会显示该元素。

Firefox column floated right issue image

.list {
  column-count: 2;
  column-gap:60px;
}

.close {
  float: right;
}

<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
</ol>

我正在使用 Firefox Quantum 58.0.2（64 位），并尝试了最新的 Chrome、Edge 和 Opera，它们运行良好。

已将 Firefox 降级回 55.0 版，问题已解决。我在这里向 mozilla 报告了这个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1441048

对我来说，这似乎是一个错误。我可以想象至少有两个修复：

如果您的列表项数量为奇数，请添加一个列表项

这是一个棘手的解决方法：

.list {
  column-count: 2;
  column-gap: 60px;
}

.list > li:last-child {
  visibility: hidden;
}

.close {
  float: right;
}

<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
  <li></li>
</ol>

使用绝对定位

我认为这是更好的解决方案：

.list {
  column-count: 2;
  column-gap:60px;
}

.list > li {
  position:relative;
}

.close {
  position: absolute;
  right: 0;
}

<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
</ol>