為什么我的 CSS 在 Safari 中不能按預期工作，但在 Chrome 上工作正常

Question

我正在制作自己的網站，我想為我的照片測試一種風格，通過在照片后面放置一個具有模糊效果的圖像，我基本上給它們一個彩色陰影。 它工作得很好……在 Chrome 上，Safari 是另一個故事。

有人可以解釋為什么圖像在 Safari 上向右移動，但在 Chrome 上卻沒有，我該如何解決這個問題？

謝謝！

HTML

 .center { text-align: center; }.focal-image { width: 500px; height: 500px; border-radius: 25px; z-index: 1; position: absolute; }.focal-image-blur { width: 500px; height: 500px; border-radius: 10%; -webkit-filter: blur(10px); filter: blur(10px); position: relative; }

 <body> <div class="center"> <h1>Mark Reggiardo</h1> <p>Welcome to my website. This page is currently under construction. Meanwhile, here is a picture of the ocean:)</p> <img class="focal-image" src="/assets/images/CatalinaOcean.png" alt="A view of the ocean from my trip to Catalina Island"> <img class="focal-image-blur" src="/assets/images/CatalinaOcean.png"> </div> </body>

該網站在 Chrome 上的外觀：

該站點在 Safari 上的樣子：

Answer 1

Safari 的問題在於它沒有將 imgs 居中對齊，盡管 Chrome 使用“text-align: center”來做到這一點。

需要進行一些調整。

絕對定位的 img 需要“找到”一個本身顯式定位的父元素。 由於 .center div 不是，它會返回並且定位將相對於主體發生（在給定的代碼段中）。 所以讓 .center 元素有 position: relative;

主 img 沒有正確居中，為此我們可以通過先將其在父 div 上移動 50%，然后返回其自身寬度的 50% 來將其居中。

這是一個適用於 Chrome 和 Safari 的代碼段，您無需刪除 .center div。

 .center { text-align: center; position:relative; }.focal-image { width: 500px; height: 500px; border-radius: 25px; z-index: 1; position: absolute; left:50%; transform: translateX(-50%); }.focal-image-blur { width: 500px; height: 500px; border-radius: 10%; -webkit-filter: blur(10px); filter: blur(10px); position: relative; }

 <body> <div class="center"> <h1>Mark Reggiardo</h1> <p>Welcome to my website. This page is currently under construction. Meanwhile, here is a picture of the ocean:)</p> <img class="focal-image" src="https://i.stack.imgur.com/Hk1uV.jpg" alt="A view of the ocean from my trip to Catalina Island"> <img class="focal-image-blur" src="https://i.stack.imgur.com/Hk1uV.jpg"> </div> </body>

為什么我的 CSS 在 Safari 中不能按預期工作，但在 Chrome 上工作正常

問題描述

1 個解決方案

解決方案1
0 已采納 2021-02-25 07:20:05

為什么我的 CSS 在 Safari 中不能按預期工作，但在 Chrome 上工作正常

問題描述

1 個解決方案

解決方案1 0 已采納 2021-02-25 07:20:05

解決方案1
0 已采納 2021-02-25 07:20:05