Warum funktioniert der einfache Flexbox-Zentrierungscode nicht in Safari 5 und 6?

Question

Hey Leute, ich habe diese Website vor kurzem HERE gebaut, und ich habe flexbox und autoprefixer verwendet, um eine Menge Sachen auf dieser Website auszurichten.

Jetzt mir inspite autoprefixer mit, schickte mein Kunde mir die folgenden Screenshots einer der Sektionen:

Wie Sie die Bilder in der Mitte des Kreises ausgerichtet sind, nicht sehen können. Dies ist nicht in allen neueren Browsern der Fall, und IE 10+ funktioniert in neueren Browsern einwandfrei.

Von was ich nach dem Besuch mehrerer SO-Threads sammeln konnte ist, dass sogar Safari 5+ Flex mit Präfixen unterstützt. Ich habe also keine Ahnung, warum mein Flex-Code nicht funktioniert.

Die HTML:

<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2"> 
    <a href=""> 
     <img src="images/focus-feature-points/2.jpg" alt="focus point"> 
    </a> 
    <figcaption> 
     <h3>Engaging Educational Games</h3> 
    </figcaption> 
</figure> 

Und die CSS für den <a> Tag ist wie folgt:

.focus-point > a { 
    overflow: hidden; 
    position: relative; 
    border-radius: 50%; 
    border: 3px solid; 
    display: inline-block; 
    height: 260px; 
    width: 260px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transition: all .3s; 
    transition: all .3s; 
} 

Die Version von Safari meines Client verwendet, ist Safari 5.1.10.

Also kann jemand erklären, warum trotz Verwendung von Präfix-Code mein Flexbox-Code immer noch nicht funktioniert?

Ich bin mir auch bewusst, dass einige erweiterte flexbox-Eigenschaften Probleme in älteren Browsern haben können, die flexbox teilweise unterstützen (zB flex-wrap), aber wie Sie sehen, habe ich nur die grundlegendsten Flexbox-Eigenschaften in meinem Beispiel verwendet.

Kann jemand erklären, was mache ich falsch?

Vielen Dank.

Answer 1

Safari-Versionen vor 6.1 unterstützen eine previous version of the flexbox specification (source).

Für Safari 5.0, 5.1 und 6.0, zusätzlich zu display: -webkit-box (das ist die display: flex jener Zeit), müssen Sie die -webkit-box-orient Eigenschaft verwenden.

Dies teilt dem Flex-Container mit, wie er seine untergeordneten Elemente ausrichten soll.

Der Anfangswert ist inline-axis. Versuchen Sie es mit vertical oder horizontal.

Dies ist der Abschnitt in der Spezifikation mit den Details: https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation

Weitere Details hier: Flexbox code working on all browsers except Safari. Why?

Answer 2

Versuchen Hinzufügen margin: auto und sehen, ob die Dinge fixiert.

https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.sbo7eyw65