javascript - CSS3 Columns children with margin issue w//Chrome

Question

http://dev.metertech.co.uk/technologies/patents-and-licensing

在上面的页面上，您可以看到第二列从顶部向下推了一点。

在调整页面大小时，问题会自行纠正。

所有其他页面，甚至那些具有相同数量的 <p> 的页面.content 的标签正确呈现列。

我不知道如何让它正确对齐。有任何想法吗？

以下是我认为您可能会觉得相关的样式。

.page .content {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}
.content p {
  margin: 0 0 15px;
}

p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

body {
  font-size: 15.5px;
  letter-spacing: 0.4px;
  line-height: 2;
}

Answer 1

即使我没有对这个问题的解释 - 你是否尝试过对段落使用 display: inline-block ？应用它似乎可以解决 chrome 的问题。

.content p {
    display: inline-block;
}