Safari：:before-element in column-count on wrong positon (bug?)
Safari：:before-element in column-count on wrong positon (bug?)
提问于 2018-09-30 06:44:50
我在Safari中发现了一个奇怪的行为，现在我不确定这是一个bug还是我遗漏了什么。
当我将一个容器中的多个段落拆分为两列时(在column-count的帮助下)，并另外给这些元素一个absolute-positioned :before-element，在safari中会发生一些奇怪的事情。第二列中的:before元素不是相对于其段落定位的。取而代之的是，safari假装它们的位置没有column-count，并将它们放在段落正常的位置(在第一列下面继续)。
是我漏掉了什么，还是这是个bug？如果这是一个bug，它是否已知，是否有解决方法？
(每个其他浏览器在其段落旁边的第二列中显示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>
回答 1
Stack Overflow用户
发布于 2018-09-30 07:41:47
不确定这是否是一个已知的bug，但是你可以通过使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52573152
复制相关文章
相似问题