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

Question

这可能是我遗漏的非常简单的东西，但由于某种原因，我的 HTML 按钮文本默认为蓝色，尽管 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

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

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