css Anzeige flex nicht richtig auf Chrom und Safari arbeiten

Question

I Flexbox Eigenschaften verwendet, um meine Abschnitt wie folgt aussehen:

Es funktioniert auf Chrome in Ordnung, aber ich bemerkte ein paar Unterschiede, wenn ich firefox überprüft und Safari.

Dies ist, wie Chrom aussieht:

Aber auf Firefox, ich Verwaltung bin nicht-Marge von 1% anzuwenden, wie ich als Rotsignal wollen zeigt:

und auf Safari sind die Boxen alle eins nach dem anderen:

Es ist eine WordPress-Seite und noch nicht live. Aber hier ist meine HTML-Struktur:

<section id="services"> 

     // here goes the title of the container 

     <div class="main-container col-lg"> 

       // here go all the box 

     <div class="services-container">  

       // this one of the boxes    
     </div> 
     </div> 
    </section> 

Und die CSS:

#services { 
    background-image: url("img/Services-background.jpg"); 
    background-color: red; 
} 
.col-lg { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin: initial; 
    max-width: 100%; 
} 
.services-container { 
    color: #d6d6d6; 
    margin: 1%; 
    max-width: 100%; 
    width: 30%; 
} 

Wie kann ich diese Arbeit auf allen Browsern zu machen?

Answer 1

empfehle ich Ihnen nicht Flexbox verwenden, sondern schwimmt statt. alle Flex-Eigenschaften löschen Ihre CSS sollte wie folgt aussehen:

#services{ 
    background-image: url(img/Services-background.jpg); 
    overflow: auto; 
} 
.services-container { 
    color: #d6d6d6; 
    width: 30%; 
    float: left; 
    margin: 1%; 
} 

Dann können Sie den Rest des Styling hinzuzufügen. Es funktioniert auf allen Browsern.

Answer 2

Der beste Weg, um sicherzustellen, dass flex in allen Browsern gleich funktioniert, ist die Verwendung von Präfixen.

Here's the chart from MDN Sie die verschiedenen Browser-Präfixe für Flex-Box zeigt (und allgemeine Browser-Unterstützung Hinweise)

Answer 3

display: flex; 
-webkit-display: flex; 
-moz-display: flex; 
-ms--display: flex;