仅 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 高度的负值，但我希望如果有一些非 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);
}

将显示更改为远离内联块可以解决此问题。