Javascript 将a href样式设置为按钮

我正在创建一组在每个浏览器中都可以使用的HTML组件（这个想法是从哪里开始的：-））

现在，我想有一个按钮，根据StackOverflow上的帖子，我不应该使用按钮，因为这个按钮在点击时有3D推送效果。为了删除该选项，建议使用

a href

并将其样式设置为我喜欢的按钮

下面是HTML：

<a href="#" class="button">
    <span>Yes</span>
</a>

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a:active.button {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

没有什么是真正复杂的

现在，这一切都可以在谷歌浏览器和火狐浏览器中使用，正如本文所示

该按钮有3种不同的状态：

• 正常的“默认”按钮
• 将鼠标悬停在其上时的样式
• 当您单击样式时，它将显示一个样式

现在，当您单击按钮时，Internet Explorer不会应用新样式，它与悬停时的样式相同。除非单击边框（如果成功单击边框，则不会应用正确的样式）

现在，为什么我会有这种行为，并且可以解决它，因为它对我的控制套件的开发至关重要

---

我知道用jQuery可以通过添加一个类来解决问题，但这似乎是一个非常丑陋的解决方案，如果有一个“CSS友好”的解决方案，我会使用它。

这可能是因为CSS选择器是向后的：

更改：

a:active.button {

到

Chrome等人似乎并不关心这些东西的顺序，但IE是，嗯，IE

a按钮{
颜色：#444；
边框：1px实心#阿巴巴；
游标：默认值；
填充：0 5px 0 5px；
文字装饰：无；
}
a、 按钮：悬停{
背景色：#cde6f7；
边框：1px实心#92c0e0；
}
a、 按钮：激活{
背景色：#92c0e0；
边框：1px实心#2a8dd4；
}

---

这似乎是一个简单的优先级问题<代码>a.按钮：悬停比

a:活动。按钮

更准确，因此它具有优先权。浏览器行为不完全相同的原因很简单，因为它们处理关系的方式不同

确保不同的伪类始终设置在选择器规则的同一级别将有助于解决此问题

---

因此，这意味着

a:active。按钮

应切换到

a。按钮：active

或其他按钮被切换…

您可以通过添加

button {
    padding:0;
}

---

哈哈，我喜欢这个评论“但是IE是，嗯，IE”。这不是不虔诚的真理吗？结果是一样的，它不起作用。尝试用IE点击文本。按钮的样式不会改变。然而，点击“下一步”确实触发了按钮的风格。这让我想起了一篇帖子，其中Chrome和Firefox进行了一场全面的决斗，而IE正在吮吸它的拇指。我可以确认，这对IE也不起作用。似乎

正在阻止

:active

行为，即使在span被删除之后：active类未设置我已更新小提琴以匹配您所说的内容，但结果仍然相同。另外，当我将活动放置在悬停之前时，单击边框也不起作用，这让我认为活动优先于悬停。你能再看一看吗。请检查此线程：。这似乎是由于内部的

元素造成的。谢谢你的评论，但这并没有回答我的问题。

button {
    padding:0;
}