クロームとSafariで正常に動作していない:それはChromeで正常に動作しますが、私は、Firefoxをチェックすると、私はいくつかの違いに気づいたCSSの表示フレックス私は私のセクションでは、このように見えるようにするためにフレキシボックスのプロパティを使用
とサファリ。
しかし、Firefoxの上で、私は赤の信号としたいように1%のマージンに適用する管理していないのです示しています
そして、サファリでは、箱はすべて次々と続いています:
これはWordPressサイトであり、まだライブしていません。
<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%;
}
どのように私はすべてのブラウザでこの作業を行うことができますが、ここに私のHTML構造はありますか?
最新のブラウザでFlexboxがうまく動作します。それはまったく新しいもので、一部のブラウザは特別な注意を必要とします。この場合、[**%マージンを使用すると問題が発生します**](http://stackoverflow.com/a/36783414/3597276)。 –
Safariについては、[** Chrome/Safariで100%のフレックスペアレント**を満たすことはできません](http://stackoverflow.com/q/33636796/3597276)と[**フレックスボックスコードはSafariを除くすべてのブラウザで動作します。なぜ?**](http://stackoverflow.com/q/35137085/3597276)。 –