Safari浏览器CSS兼容问题求助：Elementor页面按钮样式失效

用Elementor搭建的页面，为按钮编写了自定义CSS，在Chrome等浏览器及移动设备上显示正常，但在iPhone或Mac的Safari浏览器中按钮样式出现混乱。

显示效果对比 #

Chrome显示效果 #

Safari显示效果 #

当前使用的CSS代码 #

.slide-btn-1{
    background: #FBDB1F;
    padding: 12px 40px 12px 40px;
    color: #000;
    font-size: 17px;
    font-weight: 600;
    border:1px solid #FBDB1F;
}
.slide-btn-1:hover{
    background: #fff;
    color:#000;
    border:1px solid #fff;
}
.slide-btn-2{
    border:1px solid #FBDB1F;
    padding: 12px 40px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin-left: 10px;
}
.slide-btn-2:hover{
    background: #fff;
    color:#000;
    border:1px solid #fff;
}

解决方案 #

Safari对原生按钮元素有默认的用户代理样式，会覆盖自定义CSS，添加样式重置属性即可解决：

修改后的CSS代码：

.slide-btn-1{
    background: #FBDB1F;
    padding: 12px 40px;
    color: #000;
    font-size: 17px;
    font-weight: 600;
    border:1px solid #FBDB1F;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border-radius: 0; /* 可根据需求调整圆角大小 */
}
.slide-btn-1:hover{
    background: #fff;
    color:#000;
    border:1px solid #fff;
}
.slide-btn-2{
    border:1px solid #FBDB1F;
    padding: 12px 40px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin-left: 10px;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border-radius: 0; /* 可根据需求调整圆角大小 */
    background: transparent;
}
.slide-btn-2:hover{
    background: #fff;
    color:#000;
    border:1px solid #fff;
}

关键修改说明 #

• -webkit-appearance: none; 和 appearance: none;：禁用Safari默认的按钮外观渲染，确保自定义样式生效
• box-sizing: border-box;：让内边距和边框包含在元素总尺寸内，避免布局偏移
• background: transparent;：明确设置第二个按钮的背景为透明，消除Safari默认背景的干扰
• border-radius: 0;：可选，若不需要圆角可添加，如需圆角可设置对应数值

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