css display flex在chrome和safari上無法正常工作

Question

我使用flexbox屬性使我的部分看起來像這樣：

它在Chrome上工作正常，但我注意到當我檢查firefox和safari時有一些差異。

這就是chrome的樣子：

但在Firefox上，由於紅色信號顯示，我無法像我想要的那樣申請1％的保證金：

在野生動物園，盒子都是一個接一個：

這是一個WordPress網站，尚未生效。 但這是我的html結構：

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

而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%;
}

如何在所有瀏覽器上使用此功能？

Answer 1

確保flex在所有瀏覽器上同等運行的最佳方法是使用前綴。

這是來自MDN的圖表，顯示了可用於彈性框的不同瀏覽器前綴（以及一般瀏覽器支持通知）

Answer 2

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

Answer 3

我強烈建議你不要使用flexbox，而是浮動。 刪除css應該如下所示的所有flex屬性：

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

然后你可以添加其余的樣式。 它適用於所有瀏覽器。

Answer 4

有時HTML version可能是原因（在我的情況下） ：

我在source code的頂部找了<!DOCTYPE html> 。 我的HTML結果是4.0 something ，這就是（很可能） flex不起作用的原因。 一旦改變，它運作良好。

祝好運...

css display flex在chrome和safari上無法正常工作

問題描述

4 個解決方案

解決方案1
4 2016-09-30 08:24:43

解決方案2
3 2016-09-30 09:31:25

解決方案3
1 已采納 2016-09-30 09:24:42

解決方案4
1 2018-04-03 09:55:20

css display flex在chrome和safari上無法正常工作

問題描述

4 個解決方案

解決方案1 4 2016-09-30 08:24:43

解決方案2 3 2016-09-30 09:31:25

解決方案3 1 已采納 2016-09-30 09:24:42

解決方案4 1 2018-04-03 09:55:20

解決方案1
4 2016-09-30 08:24:43

解決方案2
3 2016-09-30 09:31:25

解決方案3
1 已采納 2016-09-30 09:24:42

解決方案4
1 2018-04-03 09:55:20