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%;
}
我怎样才能让所有的浏览器这项工作?
我强烈建议您不要使用Flexbox的,但浮来代替。 删除所有的弯曲特性你的CSS应该是这样的:
#services{
background-image: url(img/Services-background.jpg);
overflow: auto;
}
.services-container {
color: #d6d6d6;
width: 30%;
float: left;
margin: 1%;
}
那么你可以添加样式的其余部分。它将适用于所有浏览器。
我正在使用浮动属性,并确实适用于所有浏览器。赞赏 –
确保flex在所有浏览器上平等工作的最佳方式是使用前缀。
Here's the chart from MDN显示你可弯曲盒(和一般的浏览器支持声明)不同浏览器前缀
链接似乎很奇怪,只需点击右侧边栏上的_Browser compatibility_链接即可查看带有前缀的表格。 – pixeldesu
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
Flexbox在现代浏览器中工作正常。这只是新的,有些浏览器需要特别关注。在这种情况下,[**使用百分比余量导致问题**](http://*.com/a/36783414/3597276)。 –
对于Safari,请参阅[** Chrome/Safari未填充flex父级**的100%高度](http://*.com/q/33636796/3597276)和[** Flexbox代码可用于除Safari之外的所有浏览器。为什么呢?**](http://*.com/q/35137085/3597276)。 –