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在所有浏览器上同等运行的最佳方法是使用前缀。

Here's the chart from 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可能是（在我的情况下）的原因：

我在<!DOCTYPE html>的顶部找了source code。我的HTML结果是4.0 something，这就是flex无效的原因（很可能）。一旦改变，它运作良好。

祝你好运......

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

4 个答案: