仅在 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 高度，然后将 margin top 更改为 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);
}

<罢工>

将显示从内联 block 中移开可以修复它。