我在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>
发布于 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>
https://stackoverflow.com/questions/52573152
复制相似问题