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

问题描述：

我试图从IE9上的按钮中删除按下的效果。在所有其他浏览器中，我没有任何问题。我无法删除Internet Explorer 9中按钮的按下效果。

请看一看的代码

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按钮你会看到文字被移到右边和底部。我想删除它。

任何线索？谢谢！

也许可以尝试设置样式为：走访：链接？ – Anagio 2012-01-03 15:29:26

这是一个按钮元素，不是锚点。 – sanbor 2012-01-04 15:50:21

重复的问题有我找到的唯一正确答案：http://stackoverflow.com/a/21163265/2816199。 – tomekwi 2015-08-11 09:31:56

答

当元素是一个锚点时，IE只识别：active伪类。

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

尝试按钮元素更改为锚标记，并调整造型重现你不得不为你的按钮的外观。

是的，这是一个很好的解决方案，但是我正在使用的webapp使用focus focus元素（用户使用TAB键选择适当的按钮）使用：focus伪类。我试图改变，但这给我们带来了其他问题，所以我更喜欢IE9和IE8有一点点的视觉问题。所以使用按钮这是一个很好的解决方案，只有IE9有这个问题。奇怪的是，这似乎并没有取代文本的css值。 – sanbor 2012-01-05 17:41:18

顺便说一下，检查您提供的链接，在页面底部显示 “适用于： A，ABBR，ACRONYM，地址，B，BIG，BLOCKQUOTE，BODY，CAPTION，CENTER，CITE，代码，COL，COLGROUP，DD，DFN，DIR，DIV，DL，DT，EM，FORM，hn，HTML，I，IMG，INPUT，INPUT类型=按钮，INPUT类型=复选框，INPUT type = file，INPUT type =图像，输入类型=密码，INPUT类型=收音机，输入类型=重置，输入类型=提交，输入类型=文本，...“ 如果您尝试我发布在jsfiddle中的代码，您可以更改背景按钮和IE的颜色会应用该更改，因此它正在识别该选择器。 – sanbor 2012-01-05 17:46:40

答

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

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

如果你仍然想使用<button>，我发现有对每个浏览器的一些特性（在一个简单的调试）：

铬增加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

感谢您的回答。无论如何，这个问题是3年前，我甚至不再在这个项目中工作。正如我在前一个问题中所说的那样，该应用程序具有一些可用性，因此将按钮更改为链接元素对此有一定影响。 – sanbor 2015-09-18 20:02:36

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

相关推荐