按钮在CSS中显示不同字体颜色的FF和Webkit

Question

我很困惑这个。我已经使用大多数CSS构建了“阅读更多”按钮（以下this tutorial）。一切运行良好，但文本在Firefox中显示为白色，但在Webkit中显示为淡蓝色（Safari，Chrome）。

这里的CSS：

.showcase-readmore { 
float:right; 
color:#ffffff; 
font:2em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
padding:14px; 
background:url(images/overlay.png) repeat-x center #0033cc; 
border:1px solid #0033cc; 
background-color:rgba(0,51,204,1); 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
border-radius:10px; 
border-bottom:1px solid #0033cc; 
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
} 

.showcase-readmore:hover{background-color:rgba(0,51,204,0.6);} 

.showcase-readmore:active{position:relative;top:2px;} 

和HTML：

<a class="showcase-readmore" href="services">Read More</a> 

我是这样看它在FF：

和Chrome：

其中FF是期望的行为。我唯一的猜测是，透明度在某种程度上导致白色字体不透明并与蓝色背景混合？

我很难过！

Answer 1

对我而言，Firefox和Chrome都是白色的，所以我很确定CSS的另一部分存在一些问题：链接元素上的伪选择器。

由于您在此处设计链接，因此问题可能是a:visited推翻了.showcase-readmore。要解决此问题，请尝试将选择器添加到您的按钮样式中：

.showcase-readmore:link, .showcase-readmore:visited { 
    /* ... */ 
}