CSS显示器挠性无法在Chrome和Safari

我用Flexbox的属性，使我的部分看起来像这样正常工作：CSS显示器挠性无法在Chrome和Safari

它工作正常，在Chrome，但我注意到有一些不同，当我检查Firefox和苹果浏览器。

这是镀铬的样子：

但在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%; 
}

我怎样才能让所有的浏览器这项工作？

来源

2016-09-30 Wosley Alarico

Flexbox在现代浏览器中工作正常。这只是新的，有些浏览器需要特别关注。在这种情况下，[**使用百分比余量导致问题**]（http://stackoverflow.com/a/36783414/3597276）。 –

对于Safari，请参阅[** Chrome/Safari未填充flex父级**的100％高度]（http://stackoverflow.com/q/33636796/3597276）和[** Flexbox代码可用于除Safari之外的所有浏览器。为什么呢？**]（http://stackoverflow.com/q/35137085/3597276）。 –

我强烈建议您不要使用Flexbox的，但浮来代替。删除所有的弯曲特性你的CSS应该是这样的：

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

那么你可以添加样式的其余部分。它将适用于所有浏览器。

来源

2016-09-30 09:24:42

我正在使用浮动属性，并确实适用于所有浏览器。赞赏 –

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

Here's the chart from MDN显示你可弯曲盒（和一般的浏览器支持声明）不同浏览器前缀

来源

2016-09-30 08:24:43 pixeldesu

链接似乎很奇怪，只需点击右侧边栏上的_Browser compatibility_链接即可查看带有前缀的表格。 – pixeldesu

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

来源

2016-09-30 09:31:25 Shahzaib

CSS显示器挠性无法在Chrome和Safari

回答

相关问题