css - 内置 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 {
   /* ... */
}