为什么我的 CSS 在 Safari 中无法正常工作，但在 Chrome 上却可以正常工作答案

【问题标题】：Why does my CSS not work as expected in Safari but it works fine on Chrome为什么我的 CSS 在 Safari 中无法正常工作，但在 Chrome 上却可以正常工作
【发布时间】：2021-02-25 15:20:05
【问题描述】：

我正在制作自己的网站，我想为我的照片测试一种风格，通过在照片后面放置一个具有模糊效果的图像，我基本上给它们一个彩色阴影。效果很好……在 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 上的样子：

【问题讨论】：

我抓取了您的代码示例并将它们放入 codepen（但必须更改图像），在 Safari 14.0.2 (Big Sur) 中，我看到图像的样式正确。是否有其他代码会影响这一点？您的 Safari 或 iOS 版本是否有很大不同？
我不认为这是版本，因为它也不能在我的 iPhone 上运行。也许还有其他代码会影响这一点，我不确定。任何想法代码和像素？
当我删除中心类 div 时，它在 Safari 上运行良好。我想我只需要尝试以其他方式居中
好吧，这是我拼凑的代码笔：codepen.io/code-and-pixels/pen/VwmyyVJ。我从图像上方删除了文本，并用我可以看到/链接到的图像更改了它们。我还注释掉了高度设置，只是因为新图像不是方形的。但这在 Safari（macbook 和 iphone）中对我来说很好。也许检查居中或是否有其他与图像相关的 CSS？

标签： html css

【解决方案1】：

Safari 的问题在于它没有将图像居中对齐，尽管 Chrome 使用 'text-align: center' 来做到这一点。

需要进行一些调整。

绝对定位的 img 需要“找到”一个本身显式定位的父元素。由于 .center div 不是，它会返回并且定位将相对于身体发生（在给定的 sn-p 中）。所以让 .center 元素有 position: relative;

主 img 没有正确居中，为此我们可以先将其移过父 div 50%，然后再移回其自身宽度的 50%。

这是一个适用于 Chrome 和 Safari 的 sn-p，您无需删除 .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>

【讨论】：

谢谢！我谦虚地给你打上绿色的勾号，你优雅地解决了我的问题！