html - 单击事件后 Foundation 5 按钮类中断(在 webkit 浏览器中)

Question

这是我第一次使用框架，我正在使用 zurbs Foundation 5 框架。

我试图扩展/覆盖默认的 .button 类并将其用作我的主按钮。下面是我的 custom.css 文件的 css，它覆盖了默认的 Foundation 5 样式:

CSS 样式

.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}

.button:hover{
background: #46A18C;
}

对应的HTML元素:

<p>This is a description of the thing in the thing</p>
<a class="button" href="#">View Project</a>

我似乎遇到的问题只在 webkit 浏览器 (safari/chrome) 中很明显，在这些浏览器中一切都在加载时完美运行。只有在您单击链接后才会出现此问题，目前所有链接都设置为 href="#"。单击链接后，每个按钮内的文本都会消失，只会在悬停时重新出现。不确定它是否相关，但此链接的 Foundation 样式还包括一个设置为 background-color 300ms ease-out 0s

的 transition 属性

您可以在此处查看示例:http://www.kashmachine.ca/build

我不确定是什么原因造成的，我已经通过 Firebug 解决了这个问题，一个接一个地禁用样式，但似乎没有什么可以解决的。任何/所有建议都会很棒。我对网络开发有点陌生，但这真的让我很困惑。再次感谢您的帮助。

Answer 1

你的

a, a:visited {
color:#EE4D0D;
text-decoration:none;
}

与按钮的背景颜色相同..

像这样处理你的按钮:

a.button

所以:

a.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}

a.button:hover{
background: #46A18C;
}

那应该覆盖它..