display：サファリでフレックスが動作しない

Question

フレキシブルボックスがサファイアで正しく動作しないため、すべてのボックスが1つに縮小されます。私はここでは、Windowsのサファリのバージョン5.1.7に

http://prntscr.com/dyiitd

をテストするHTMLコードです：ここでは

<div class="container"> 
     <div class="statistics-box"> 
      <div class="statistics-item"> 
       <span class="value">2,300</span> 
       <p class="title">Destinations</p> 
      </div> 
      <div class="statistics-item"> 
       <span class="value">1,000</span> 
       <p class="title">Cities</p> 
      </div> 
      <div class="statistics-item"> 
       <span class="value">35,000</span> 
       <p class="title">Boats</p> 
      </div> 
      <div class="statistics-item"> 
       <span class="value">50,000</span> 
       <p class="title">Sailors</p> 
      </div> 
     </div> 
    </div> 

は、CSSコードです：

追加することにより、固定

.statistics-box { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    padding: 20px 10px; 
    width: 100%; 
    background: #ffffff; 
    border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(52, 52, 52, 0.15); 
    box-shadow: 0px 0px 30px 0px rgba(52, 52, 52, 0.15); 
} 



.statistics-box .statistics-item { 
    flex: 1; 
    padding: 10px 0; 
} 

.statistics-box .statistics-item:not(:last-of-type) { 
     border-right: 1px solid #d4d4d4; 
    } 

：

statistics-box .statistics-item { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1 ; 
    -ms-flex: 1 ; 
    flex: 1 ; 
    padding: 10px 0; 
    } 

を

Answer 1

windows safariバージョン5.1.7はフレックスをサポートしていません。

あなたがマックサファリであなたのウェブサイトをテストすれば、それは問題ありません。