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只识别：active伪类。

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

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

Answer 2

这是一种浏览器行为，一个简单的解决方案是使用链接标记而不是按钮（如果它触发了javascript函数）。

<a href="#" onclick="myfunction()" role="button"><img src="myimg"/></a>

如果您仍想使用<button>，我发现每个浏览器都有一些特性（通过简单的调试）：

Chrome 添加了outline和padding
Firefox 使用标准按钮边框添加了大量内容
IE 混淆了内部文字position

因此，要修复它们，您必须操纵按钮行为的伪选择器。对于IE，一个很好的解决方案是将文本包含在元素上，并使其相对定位。像这样：

<button type="button" class="button"><span>Buttom or Image</span></button>

<style>
    button,
    button:focus,
    button:active{
        border:1px solid black;
        background:none;
        outline:none;
        padding:0;
    }
    button span{
        position: relative;
    }
</style>

Pen

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

2 个答案: