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

Question

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

火狐专栏浮动右刊图片

.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

Answer 2

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

如果您有奇数个列表项，请添加一个列表项

这是一个 hacky 解决方法：

.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>