使用CSS3和WebKit的列计数在列上的额外边距

Question

我正在尝试column-count在带有多个段落的标记上使用css3属性.在Webkit浏览器上,我看到了什么似乎是一个bug.在某些屏幕尺寸下,段落边距无法很好地分割各列.

这是一个屏幕截图(请注意,以"Duis"开头的第三段落下,而它应该与屏幕顶部齐平):

这是问题的CodePen.我已将宽度修正为1000px,因此Chrome*/Safari用户的问题显而易见.

*编辑:刚刚在2018年初检查,Chrome不再受此错误的影响.Safari(测试11.0.3)可以!

我试图使用page-break-*规则来强制段落以避免中断.我也尝试-webkit-perspective:1按照http://caniuse.com/#feat=multicolumn上的评论使用,但这没有任何效果.

有什么想法吗？

article {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 1000px;
}

p {
  margin-top: 0;
  margin-bottom: 1.3em;
}

<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>

Answer 1

只需添加内部p:

display: inline-block;