这可能是我遗漏的非常简单的东西,但由于某种原因,我的 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 按预期更改为白色?
最佳答案
由于常规状态在您的代码中以相同方式定义,差异可能来自 :visited
状态的样式。因此,请确保您还为以下内容添加样式:
.BecomeMemberBtn:visited,
.MobSampleBtn:visited {
color: #fff;
}
关于HTML 链接在移动设备上默认为蓝色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39487583/