在Chrome和Safari上，CSS的display:flex属性无法正常工作。

Question

我使用了弹性盒子属性来让我的部分看起来像这样：

在Chrome上运行良好，但我注意到在Firefox和Safari上有一些差异。

这是Chrome的外观:

但在Firefox上，我无法像我想要的那样应用1％的边距，如红色信号所示:

在Safari上，这些框都是一个接一个的：

这是一个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%;
}

如何让这在所有浏览器上都能正常工作？

- user agent

---

Flexbox在现代浏览器中运行良好。它只是新的，一些浏览器需要特别注意。在这种情况下，使用百分比边距会导致问题。 - Michael Benjamin

对于Safari，请参见Chrome/Safari未填充弹性父元素的100％高度和Flexbox代码在除Safari外的所有浏览器上工作。为什么？。 - Michael Benjamin

Answer 1

确保flex在所有浏览器上平等工作的最佳方法是使用前缀。

这里是来自MDN的图表，显示了flex box可用的不同浏览器前缀（以及一般的浏览器支持通知）

- pixeldesu

---

链接似乎跳来跳去的，只需单击右侧边栏上的“浏览器兼容性”链接，即可查看带前缀的表格。 - pixeldesu

Answer 2

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

- Shahzaib

Answer 3

有时候HTML版本可能是原因（在我这种情况下是这样）：

我查看了源代码顶部的。我的HTML版本是4.0，这很可能是flex不起作用的原因。一旦更改了它，就正常工作了。

祝你好运...

- Aakash

Answer 4

我强烈建议您不要使用flexbox，而是使用floats。 删除所有flex属性，您的CSS应该如下所示：

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

然后您可以添加剩余的样式。它将在所有浏览器上工作。

- Elton Sousa

---

我正在使用浮动属性，确实在所有浏览器上都能正常工作。感谢。 - user agent

快速2019更新，使用flexbox在打印样式表中仍然表现不可预测。 - Matej Janovčík