Кнопка, встроенная в CSS, отображающая разные цвета шрифта в FF и Webkit

Question

Я очень смущен этим. Я создал кнопку «читать дальше», используя в основном CSS (после этого урока ). Все работает хорошо, но текст отображается в Firefox белым цветом, а в webkit (сафари, хром) голубым.

Вот 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:

с желаемым поведением. Мое единственное предположение, что из-за прозрачности белый шрифт непрозрачен и смешивается с синим фоном?

Я в тупике!

Answer 1

Для меня текст белый как в Firefox, так и в Chrome, поэтому я почти уверен, что есть какая-то проблема с другой частью CSS: псевдо-селекторами в элементе ссылки.

Поскольку вы создаете здесь ссылку, проблема может заключаться в том, что a:visited отменяет .showcase-readmore. Чтобы это исправить, попробуйте добавить селекторы к вашему стилю кнопок:

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