仅限Safari中的Css列高度不正确

Question

此代码在Chrome / Firefox中正常运行，但在Safari中，我的3列div下方的内容被推下的范围远远超过应有的范围，就好像列内容是在一列内压缩一样。

这可以在这里看到：http://codepen.io/anon/pen/egxvqP

相关代码：

.postIntro {
  width: 100%;
  display: inline-block;
  margin-top: 18px;
  column-count: 3;
  column-gap: 30px;
  column-fill: balance;
}

Answer 1

我目前的修复是使用js来获得div高度，然后将边缘顶部更改为div高度的负值，但是如果有一些not-js修复我会喜欢...我需要这可以在10个地方发生这种情况，只有在一次的情况下，代码才能正常工作。

见这里 http://codepen.io/anon/pen/OWdmXj

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  { 
    columnHeight = $('#columns').outerHeight();
    $("#contentAfter").css('margin-top', -columnHeight);
}

<击>

将显示更改为内联块可以修复它。