背景 #

页面里居中的HTML链接按钮在平板设备（尤其是iPad）上表现异常：桌面端它是黑色圆角按钮，但到了平板端却变成了蓝色圆角按钮。

问题 #

明明没写任何和蓝色相关的代码，为什么平板端的链接会变成蓝色？怎么修改下面的HTML和CSS代码，让这个链接在桌面端和平板端都一致显示为黑色样式？

现有代码 #

HTML

<div class="buttonContinue"> <a href="#">Continue</a> </div>

CSS

div.buttonContinue a:link, div.buttonContinue a:visited, div.buttonContinue a:hover, div.buttonContinue a:active { 
    display: block !important; 
    margin: auto !important; 
    width: 200px !important; 
    padding: 20px !important; 
    border-style: solid !important; 
    border-color: #CCCCCC !important; 
    border-width: 1px !important; 
    border-radius: 100px !important; 
    text-decoration: none !important; 
    font-weight: bold !important; 
    color: #333333 !important; 
}
div.buttonContinue a:hover { 
    background: #F2F2F2 !important; 
}

原因分析 #

这是iOS Safari（包括iPad的Safari浏览器）的默认样式行为搞的鬼：当你把链接样式做成按钮样子时，Safari会自动给这类元素套用系统级的按钮外观（通过-webkit-appearance属性的默认值push-button），这个默认样式自带蓝色背景和专属样式，直接覆盖了你自定义的部分设置，哪怕你没写任何蓝色相关代码也会出现这个问题。

修复方案 #

只需要在你的链接样式里加两个关键属性，就能彻底覆盖Safari的默认行为，保证全端样式一致：

1. 添加-webkit-appearance: none !important;：完全禁用Safari的系统默认按钮外观
2. 添加background-color: transparent !important;：明确设置默认状态下的背景为透明（如果想要背景是黑色，也可以直接设为#333333 !important;，看你实际需求）

修改后的CSS代码如下：

div.buttonContinue a:link, div.buttonContinue a:visited, div.buttonContinue a:hover, div.buttonContinue a:active { 
    display: block !important; 
    margin: auto !important; 
    width: 200px !important; 
    padding: 20px !important; 
    border-style: solid !important; 
    border-color: #CCCCCC !important; 
    border-width: 1px !important; 
    border-radius: 100px !important; 
    text-decoration: none !important; 
    font-weight: bold !important; 
    color: #333333 !important; 
    /* 新增属性，修复iOS Safari默认样式 */
    -webkit-appearance: none !important;
    background-color: transparent !important;
}
div.buttonContinue a:hover { 
    background: #F2F2F2 !important; 
}

这样修改后，不管是桌面端还是iPad这类iOS设备，链接按钮都会保持你定义的黑色文字、灰色边框、圆角样式，不会再出现蓝色的默认按钮外观了。

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