Bootstrap 4 Safari Bug

Sehen Sie eine abgespeckte Version hier: https://jsfiddle.net/dkmsuhL3/Bootstrap 4 Safari Bug

<html xmlns="http://www.w3.org/1999/xhtml">

<title>Bootstrap Bug Test</title> 
<!-- Bootstrap V4 --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<div class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <img class="img-fluid" src="http://via.placeholder.com/1000x1000" />      
      </div> 
      <div class="col-sm-6"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum felis sit amet augue luctus, at dignissim purus tristique. Etiam elit eros, varius ac tincidunt at, condimentum at felis. Integer eget ullamcorper ligula, ut finibus quam. Nunc tempor, enim id ultricies fringilla, ante risus venenatis ipsum, in euismod purus quam imperdiet libero. Ut diam lacus, tincidunt egestas tristique at, blandit quis est. Aenean bibendum sagittis ligula, sit amet mollis nisi iaculis at. Aenean blandit, mauris ac fermentum malesuada, massa arcu scelerisque arcu, quis molestie diam purus ut dolor.</p> 
       <p>Praesent egestas placerat dui, ac mollis dolor. In hac habitasse platea dictumst. Morbi sapien risus, consequat id tincidunt quis, lobortis a tortor. Morbi hendrerit tristique tempor. Vestibulum ultrices mauris magna, ac auctor lectus iaculis a. Aenean porta, nisi sit amet pellentesque fermentum, nibh ante molestie neque, non dictum ante justo sit amet dolor. Nunc scelerisque fringilla elit vitae tincidunt. Vivamus nec ex at enim aliquam tristique a in ipsum. Etiam bibendum mauris id scelerisque consequat. Donec nec orci leo. Nam ultricies condimentum porta. Mauris nunc nunc, ultricies in consequat sit amet, tristique ac lacus.</p> 
      </div> 
     </div> 
    </div>

Ich glaube, ich habe die Syntax korrekt, aber die beiden col-sm-6 Spalten auf Safari sind nicht horizontal passend (5.1.7)

Quelle

2017-11-02 inTheGrind

Wenn dies wirklich ein Fehler ist, empfehle ich Ihnen, heben ein Problem in der [Github Repo] (https://github.com/twbs/bootstrap/issues) – Beau

Dank , fertig: https://github.com/twbs/bootstrap/issues/24647 – inTheGrind

Dies ist kein Fehler, weil die Version von Safari ist zu denen verweisen Sie (5.1.7, Windows) wird von Bootstrap nicht 4

https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#desktop-browsers unterstützt

in der Tat, die Unterstützung für diese Version von Safari im Jahr 2012 ausgelaufen ist, gleich um die Zeit nicht mehr von Apple Entwicklung von Safari fo r das Windows-Betriebssystem und zog Safari 6.0.

Quelle

2017-11-02 12:08:14

Safari 5.1.7 wird von Bootstrap nicht unterstützt.

Diese Browserversion unterstützt flexbox nicht vollständig (nur mit dem Präfix -webkit), und das Wrapping wird nicht unterstützt. Sie können versuchen, mit einem größeren Autoprefixer-Bereich selbst zu kompilieren, der -webkit- Präfixe hinzufügt, oder Sie fügen sie selbst hinzu, indem Sie angeben.

.row { 
    display: -webkit-flex; 
}

Wenn keine anderen Implementierungsfehler auftreten, kann es einfach funktionieren. Aber Sie müssen eine Zeile pro Zeile verwenden, da flex: wrap nicht unterstützt wird.

P.S. Wenn Ihr Produkt nicht über einen signifikanten Prozentsatz der Zielgruppe verfügt, die den Browser aus irgendeinem Grund weiterhin verwendet, ist es sinnvoll, sich keine Sorgen zu machen. Ich vermute, dass die Verwendung wird nahe 0 sein.

Quelle

2017-11-02 12:12:01

Ich fand eine Lösung durch die Suche im Internet.

Bootstrap 4 verwendet flexbox Eigenschaft. Wenn ich jedoch die Werte :before und :after überprüfe, sind die Werte der Pseudo-CSS-Elemente table.

So ersetzen Sie diese durch flexbox

.clearfix:before, 
.clearfix:after, 
.dl-horizontal dd:before, 
.dl-horizontal dd:after, 
.container:before, 
.container:after, 
.container-fluid:before, 
.container-fluid:after, 
.row:before, 
.row:after{ 
     display: flex 
}

Quelle

2017-12-20 20:46:26

Bootstrap 4 Safari Bug

Antwort

Verwandte Themen