CSS保证金：0自动；无法在 Safari 浏览器中工作

Question

所以我正在开发一个相当基本的 WordPress 工作网站。对于初学者来说，一切都相对顺利，但是在尝试使我的网站在多个浏览器上看起来相同时，我遇到了一个问题。

似乎每次我使用 margin: 0 auto;在我的 CSS 中，它根本不适用于 Safari。起初我不得不添加 display:-webkit-flex;让它工作，这样就解决了一个问题...

但是现在我的 div 没有正确对齐，因为 Safari 似乎忽略了我为边距设置的规则。

谁能帮我解决这个问题？

我附上了一些屏幕截图，您可以看到其中的区别。我会附上代码，但它实际上只在 Safari 中。 IE 和 Mozilla 看起来与 Chrome.

中的预期相同

Google Chrome 截图：

Safari 截图：

提前感谢您查看此 post 并可能解决我的问题。

Answer 1

如果该行正在使用 display flex，则不需要边距，因为 flex 默认为一行，然后 justify-content 应用于该行。

这样你就可以将 justify-content 设置为 space-between

justify-content

.container {
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 200px;
  height: 200px;
  background: teal;
}

<div class="container">
  <div class="row"> 
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

您可以通过在每个 "item" class justify-content: space-between 上填充来确保响应时内容永远不会接触；仍会解决您的间距问题。

要熟悉 flex 并了解所有来龙去脉，请查看 FlexFroggy and flex cheat sheet

CSS保证金：0自动；无法在 Safari 浏览器中工作

CSS margin: 0 auto; not working in Safari Browser

html

css

safari

cross-browser

flexbox