Safari：在错误的positon上的列计数中：before-element（错误？）

Question

我在Safari中发现了一个奇怪的行为，现在我不确定这是错误还是丢失了某些东西。

当我将一个容器中的多个段落分为两列时（在column-count的帮助下），并为这些元素添加了一个absolute位置的:before-元素，从而在野生动物园中发生了一些奇怪的事情。第二列中的：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而不是绝对的错误来解决它。

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