iOS端按钮渲染异常求助：颜色与位置属性显示错误

1. 重置Safari默认按钮样式 #

iPhone自带的Safari浏览器会给按钮添加默认外观（比如自带的背景、边框），直接覆盖了你自定义的样式，必须先重置：

.more-projects-button {
    /* 保留你原来的样式 */
    position: relative;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    text-decoration: none;

    /* 新增重置属性 */
    -webkit-appearance: none; /* 移除Safari默认外观 */
    appearance: none; /* 标准属性，兼容其他现代浏览器 */
    cursor: pointer; /* 添加鼠标指针样式，优化交互体验 */
}

2. 修复位置偏移问题 #

如果添加上述样式后位置仍异常，可以尝试以下调整：

• 检查按钮的父元素是否设置了overflow: hidden或异常定位属性，这类设置会干扰relative定位元素的显示。
• 换一种兼容性更好的居中方式：给按钮设置固定宽度后用margin实现水平居中

.more-projects-button {
    /* 替换位置相关代码 */
    position: relative;
    top: 40px;
    width: 150px; /* 设置固定宽度 */
    margin: 0 auto; /* 实现水平居中 */
    /* 其他原有样式和重置样式保留 */
}

3. 自定义点击反馈（可选） #

iPhone上点击按钮默认会有灰色高亮效果，你可以自定义点击状态的样式：

.more-projects-button:active {
    background-color: #0056b3; /* 用深色蓝色作为点击反馈 */
    transform: translateX(-50%) scale(0.98); /* 轻微缩放，增强交互感 */
}

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