CSS保證金：0自動； 在Safari瀏覽器中無法使用

Question

因此，我正在開發一個相當基本的WordPress網站以供工作。 對於初學者來說，一切都做的相對不錯，但是在嘗試使我的網站在多個瀏覽器上看起來一樣時，我遇到了一個問題。

似乎我每次使用margin時：0 auto; 在我的CSS中，它根本不適用於Safari。 首先，我必須添加display：-webkit-flex; 使這項工作正常進行，這是一個解決問題的方法...

但是現在我的div不能正確對齊，因為Safari似乎忽略了我為邊距設置的規則。

有人可以在這件事上幫助我嗎？

我已附上了一些屏幕截圖，您可以看到其中的區別。 我會附加代碼，但實際上只是在Safari中。 IE和Mozilla的外觀都與Chrome相同。

Google Chrome屏幕截圖：

Safari屏幕截圖：

在此先感謝您查看這篇文章並有可能解決我的問題。

Answer 1

如果該行使用的是display flex，那么您就不需要保證金，因為flex默認為一行，然后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”類上進行填充來確保響應時內容永不觸碰。 仍會解決您的間距問題。

要熟悉flex並了解所有內容，請查看FlexFroggy和flex備忘單