为什么 Safari 无法正确呈现我的网站？

Question

我在 Django 上构建响应式网站。

在笔记本电脑上以 iPhone 12 分辨率查看我的网站时，一切看起来都很好。但是当我在 Safari 上进入网站时，部分设计呈现不正确。

例如，这是按钮在 chrome 上的样子：

这就是按钮在 safari 上的样子：

这是一个按钮 CSS 代码：

.close-button {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    font-weight: 500;
    position: relative;
    left: 300px;
    bottom: 334px;
    color: black;
}

按钮 Html 代码：

<button class="close-button" onclick="drums()">&times;</button>

Answer 1

CSS 可以在浏览器之间以不同方式呈现。我会研究特定的 CSS 特性，看看您是否必须更改它或添加不同的特性才能在 Safari 中正确呈现它。

您还可以使用开发工具并检查它以查看到底发生了什么。