css - 我无法删除 Internet Explorer 9 中按钮的按下效果

Question

我正在尝试从 IE9 上的按钮中删除按下的效果。在所有其他浏览器中我没有问题。

请看代码

HTML

<button class="fancy">howdy!</button>

CSS

.fancy {
    width: 60px;
    height: 30px;    
    position: relative;
    top: 0px;
    margin: 0;
    padding: 0px;
    display: block;
    border: none;
    padding: 0;
    color: #FFF;
    font-size: 11px;
    background: green;
    outline: none;
    overflow: hidden;
    line-height: 11px;
}

.fancy:active,.fancy:focus
{
    padding:0px;
    margin:0px;
    border: none;
    outline:none;
    text-indent: 0;
    line-height: 11px;
}

工作演示 http://jsfiddle.net/MDfvE/

如您所见，当您在 IE9 上单击该按钮时，您会看到文本被移动到右侧和底部。我想删除它。

有什么线索吗？谢谢!

Answer 1

IE 仅在元素为 anchor 时识别 :active 伪类。

http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx

尝试将按钮元素更改为 anchor 标记并调整样式以重新创建按钮的外观。