css - Safari: :before-element in column-count on wrong position (bug?)

Question

我在 Safari 中发现了一个奇怪的行为，现在我不确定这是一个错误还是我遗漏了什么。

当我将一个容器中的多个段落分成两列时(在 column-count 的帮助下)并另外给这些元素一个 absolute 定位的 : before - 元素 safari 中发生了一些奇怪的事情。第二列中的 :before 元素没有相对于它们的段落定位。相反，safari 假装没有 column-count 并将它们定位在段落通常所在的位置(在第一列下继续)。

我是不是遗漏了什么或者这是一个错误？如果这是一个错误，是否已知？是否有解决方法？

(所有其他浏览器都在其段落旁边的第二列中显示 x'，这是应该的)

这是它在 Safari 中的样子:

.container {
  width:800px;  margin:0 auto; padding:2rem;
  column-count:2;
  -webkit-column-count:2;
}

.element:before {
  content: "x";
  position:absolute;
  display:block;
  margin-left:-1rem;
  color:red;
}

<div class="container">
  <p class="element">
    Paragraph I<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph II<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph III<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IV<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph V<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VI<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VIII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IX<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph X<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
</div>

Answer 1

不确定这是否是已知错误，但您可以使用 position: relative 而不是 absolute 来修复它。

.container {
  width:800px;  margin:0 auto; padding:2rem;
  column-count:2;
  -webkit-column-count:2;
}

.element:before {
  content: "x";
  position: relative;
  display: block;
  margin-left: -1rem;
  margin-bottom: -16px;
  color: red;
  -webkit-transform: translateZ(0); // need this for safari to show position relative text
}

<div class="container">
  <p class="element">
    Paragraph I<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph II<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph III<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IV<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph V<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VI<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VIII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IX<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph X<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
</div>