HTML Link 在移动设备上默认为蓝色

Question

这可能是我遗漏的非常简单的东西，但由于某些原因，我的 HTML 按钮文本默认为蓝色，尽管 none 中的文本装饰被设置为 CSS.

HTML是这样显示的-

 .BecomeMemberBtn
    {
    display: block;
    width: 100%;
    height: 40px;
    background: #34b629;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
    text-decoration:none !important;
    font-size:11px;
    color:  #FFF;
    webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    }

<p><a class="BecomeMemberBtn" href=".../become-a-member">Become A New Member</a></p>

当我运行这里的代码时，它应该显示为白色，但当我在移动设备上测试它时 (Android & iPhone)，它显示为默认蓝色，这使得它在该按钮的绿色背景下不可读。

更烦人的是我有另一个按钮，它使用或多或少完全相同的代码并且显示正确 -

  .MobSampleBtn
    {
    display: block;
    width: 100%;
    height: 40px;
    background: #1e558d;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    color:  #FFF;
    font-weight: bold;
    text-decoration:none; 
    font-size:10px;
    webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    }

<p><a class="MobSampleBtn" href=".../Sample/True">Download Free Sample</a></p>

我的问题是 - 为什么 BecomeMemberBtn 在移动设备上默认为蓝色文本，而 MobileSampleBtn 按预期更改为白色？

Answer 1

CSStext-decoration属性仅指underline。你想要（重新）设置它 color 属性.

如果您使用的是外部 CSS 文件，还请确保清理缓存。

Answer 2

由于常规状态在您的代码中的定义方式相同，差异可能来自 :visited 状态的样式。因此，请确保您还为以下项添加样式：

.BecomeMemberBtn:visited,
.MobSampleBtn:visited {
    color: #fff;
}

HTML Link 在移动设备上默认为蓝色

HTML Link defaulting to blue on mobile devices

html

css

anchor

mobile