Question

在这个网站上：getinjuryanswers.com，我添加了CSS专栏。它在Chrome和Firefox中运行良好，但内容并未在Mac上的Safari中显示。有什么想法吗？

HTML：

<div class="twocolumns col-md-12">
<p class="representation-text">
<p class="representation-text">Many cases settle out of court, you therefore need an effective negotiator on your side. Attorney Curtis Quay spent several years defending insurance companies against personal injury claims. He understands how they think and the games they play to deny you compensation. This gives you the upper hand during the negotiation process.</p>
<p class="representation-text">To recover for a personal injury case, you must prove the defendant was responsible for your harm. ITL has a strong network of investigators and professionals in San Diego to help build your case and get you the proper compensation. Proving damages can be complicated, but our lawyers have a proven track record of excellent results.</p>
</div>

CSS：

.twocolumns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    /*column-count: 2;*/
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    /*column-gap: 30px;*/
}

Answer 1

Safari＆lt; 9.0不支持column-gap。这是一个应该达到同样效果的解决方法。由于您已经使用两个单独的元素来分割内容。

.twocolumns {
 width: 100%;
}
.twocolumns .representation-text {
 width: 50%;
 float: left;
 vertical-align: top;
}
.twocolumns .representation-text:last-child {
 width: calc(50% - 30px);
 margin-left: 30px;
}

您可能还想删除空的<p class="representation-text">

CSS列无法在Safari Mac中运行

1 个答案: