Bootstrap 3.3.7 - Grid-System funktioniert nicht auf Safari 10?

Question

Aus dem Dokument here heißt es, dass es Safari auf IOS und Mac-Desktop unterstützt.

Aber warum ist das, was ich auf meiner Safari bekomme?

Dies ist mein Code:

<!-- 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>

Ich habe umsah, aber finden nicht noch beheben. Irgendwelche Ideen?

Es ist sogar am schlimmsten, wenn ich es auf version 4 upgraden - es bricht schrecklich auf Chrome!

Was ist mit Foundation - hat es eine bessere Grid-System-Unterstützung für alle Browser?

Bitte beachte, dass du zu meinen Code auf ganze Seite um zu sehen, die richtige Raster-Layout auf Chrome, Opera und Firefox laufen.

Answer 1

ZURB 6 unterstützt die letzten beiden Versionen von Chrome, Firefox, Safari, Opera, Safari Mobile, IE Mobile (älteres Windows Phone und Windows CE-Geräte), IE 9+ und Android Web-Browser 2.3+

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

Es wäre unfair von mir, Sie über Bootstrap auf Zurb zu verweisen. Es liegt an Ihnen zu entscheiden, welche Browser Sie unterstützen müssen. Ich helfe Ihnen gerne bei spezifischen Fragen oder Problemen von Zurb.