Django响应式网站在Safari中渲染异常问题咨询

我用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>

修复步骤 #

1. 重置Safari默认按钮样式
   Safari会给按钮添加默认外观样式，通过-webkit-appearance: none去除，同时优化圆角和字符对齐：

.close-button {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 用百分比替代固定像素，适配更稳定 */
    cursor: pointer;
    border: none;
    font-weight: 500;
    position: relative;
    left: 300px;
    bottom: 334px;
    color: black;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    line-height: 40px; /* 让×字符垂直居中 */
    text-align: center;
    font-size: 22px;
}

2. 修正相对定位偏移问题
   Safari对position: relative的偏移计算可能和Chrome不一致，建议改用绝对定位结合父容器相对定位，避免硬编码像素偏移：

/* 给按钮的父容器添加相对定位 */
.button-parent {
    position: relative;
}

.close-button {
    position: absolute;
    top: calc(100% - 334px);
    right: calc(100% - 300px);
    /* 保留其他样式 */
}

3. 统一字符渲染
   ×在Safari中可能出现排版问题，可指定统一字体确保渲染一致：

.close-button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

内容的提问来源于stack exchange，提问作者PHILLIPP APETENOK