ブートストラップ3.3.7 - グリッドシステムはSafari 10で動作しませんか？

Question

文書hereから、それはIOSとMacデスクトップでSafariをサポートしていると言われています。

しかし、なぜこれが私のSafariで取得できるのですか？

これは私のコードです：

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<style type="text/css"> 
 
    .grid-item { 
 
     display: block; 
 
     margin: 0 5px; 
 
     border: 1px solid red; 
 
     height:100%; 
 
    } 
 

 
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
 
     padding-left: 0; 
 
     padding-right: 0; 
 
    } 
 

 
    /* Equal image height */ 
 
    /* http://stackoverflow.com/questions/42157249/css3-flex-stretches-the-image-instead-of-centering-it */ 
 
    /* Only apply to large, medium and small screens */ 
 
    /* https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries */ 
 
    /* Small Devices, Tablets */ 
 
    /* Medium Devices, Desktops */ 
 
    @media only screen and (min-width : 768px), 
 
    @media only screen and (min-width : 992px) { 
 
     .eq-height { 
 
      display: -webkit-box; 
 
      display: -webkit-flex; 
 
      display: -ms-flexbox; 
 
      display:   flex; 
 
      flex-wrap: wrap; 
 
     } 
 
    } 
 

 
    .eq-height > [class*='col-'] { 
 
     display: flex; 
 
     flex-direction: column; 
 
    } 
 

 
    .eq-height > [class*='col-'] > [class*='col-'] { 
 
     height:100%; 
 
    } 
 

 
    /* Hide actual image but use inline cover image */ 
 
    a.grid-item img { 
 
     opacity:0 
 
    } 
 

 
    a.grid-item { 
 
     background-size:cover 
 
    } 
 

 
    /* Gaps between items/ tiles */ 
 
    .col-sm-3 .col-sm-12, 
 
    .col-sm-6 .col-sm-12, 
 
    .col-sm-3 .col-sm-12 + .col-sm-12 { 
 
     margin-top:10px; 
 
    } 
 

 
    /* Change container size */ 
 
    .container { 
 
     width: 100%; 
 
     max-width: 1400px; 
 
     min-width: 320px; 
 
     margin: 0 auto; 
 
    } 
 

 
    @media only screen and (max-width: 1420px) { 
 
     .container { 
 
      padding: 0 20px; 
 
     } 
 
    } 
 

 
</style> 
 

 
<div class="container"> 
 

 
    <div class="row eq-height"> 
 

 
     <div class="col-sm-3"> 
 
      <div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1240" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-sm-6"> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x603" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-sm-3"> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
 
      </div> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="row eq-height"> 
 

 
     <div class="col-sm-3"> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
 
      </div> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-sm-3"> 
 
      <div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x900')"> <img class="img-responsive" src="http://placekitten.com/g/800/1200" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-sm-6"> 
 
      <div class="col-sm-12"> 
 
       <a href="#" class="grid-item"> 
 
        <video width="100%" height="100%" autoplay muted controls loop class="clip-polygon"> 
 
         <source src="big-buck-bunny_trailer.webm" type="video/webm"> 
 
        </video> 
 
       </a> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="row eq-height"> 
 

 
     <div class="col-sm-6"> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-sm-3"> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
 
      </div> 
 
      <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-sm-3"> 
 
      <div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/600x1000')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div>

私は周りを見回しているが、まだ修正を見つけることができません。何か案は？

私はversion 4にアップグレードするとさらに悪いです - それはChromeでひどく壊れます！

Foundationについて - すべてのブラウザでグリッドシステムをサポートしていますか？あなたはクローム、オペラとFirefoxの正しいグリッドレイアウトを参照してください全ページに私のコードを実行するようになった

注意。

Answer 1

Zurb 6は、クロム、Firefoxの、サファリ、オペラ、モバイルサファリ、IEモバイル（古いのWindows PhoneとWindows CEデバイス）、IE 9+の最後の2つのバージョンをサポートしており、AndroidのWebブラウザ2.3以降

http://foundation.zurb.com/sites/docs/compatibility.html

私はZurb over Bootstrapを指摘するのは不公平です。サポートする必要のあるブラウザを決定するのはあなた次第です。特定のZurbに関する質問や問題についてお手伝いいたします。