将aahref设置为按钮

我正在创建一组可在每个浏览器中运行的大量HTML组件(无论如何,这个想法始于:-))

现在,我想要一个按钮,根据StackOverflow 上的这篇文章,我不应该使用按钮,因为那个按钮具有3D推送效果.为了删除那个,建议是使用a a href和样式到我喜欢的按钮.

所以这是HTML:

    Yes

当然,这是HTML:

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;
}

没有什么真的很复杂

现在,这可以在谷歌Chrome和Firefox中运行,就像这个JsFiddle演示的那样.

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

一个普通的"默认"按钮.

悬停在它上面的一种风格.

点击它时的样式.

现在,当您单击按钮时,Internet Explorer不会应用新样式,它与悬停时的样式相同.除非您单击边框(如果您设法单击边框,则应用正确的样式).

现在,为什么我有这种行为并且可以解决,因为它对我的Control Suite的开发至关重要.

我知道可以通过在点击它时添加删除类来解决jQuery,但这似乎是一个非常难看的解决方案,如果有一个'CSS-Friendly'解决方案,我想使用那个.

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

更改:

a:active.button {

至

a.button:active {

Chrome等人似乎并不关心这些订单的顺序,但IE就是IE.

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.button:active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

    Yes