Safari MacでCSSの列が機能しない

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

サファリ< 9.0 column-gapをサポートしていません。ここでは、同じ効果を達成する必要がある回避策があります。既に2つの別々の要素を使用してコンテンツを分割しているからです。

.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">