html - 在 Firefox 中使用列时右侧 float 元素消失

Question

我正在使用具有 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，效果很好。

Answer 1

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