删除按钮上的3D推动效果

Question

我正在尝试删除HTML Button元素上的所有效果.HTML:

<div id="go">
<button onclick="load.update(true,cards.id);" type="submit"></button>
</div>

CSS:

#header #go button{
    display:block;
    border:0 none;
    cursor:pointer;
    outline:none;
    vertical-align:top;
    width:18px;
    height:33px;
    background:url('../images/cards/go.png'); //Just an image to replace it all.
}

在Chrome和Firefox中,这样可以正常工作,但在IE(至少8个)中,当按下按钮时按钮的"推动"效果仍然存在(EG偏移)是否有任何技巧我可以用来消除这种效果？提前致谢!Diesal.

Answer 1

你需要添加背景样式:hover:active:focus.

#header #go button:hover {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

#header #go button:active {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

#header #go button:focus {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}

Answer 2

我有类似的经历，并且能够在 IE8 中修复它，但不能在 IE7 中修复它。看到它在这里工作：http : //jsfiddle.net/GmkVh/7/

HTML：

<button></button>

CSS：

button {
    color:#fff;
    background:#000;
    border: none;
    outline:none;
    padding: 5px;
    cursor: pointer;
    height: 25px;
}

/* 
   It hits this state (at least in IE) as you're clicking it
   To offset the 1px left and 1px top it adds, subtract 1 from each, 
   then add 1 to the right and bottom to keep it the same width and height
*/
button:focus:active {
    padding-top: 4px;
    padding-left: 4px;
    padding-right: 6px;
    padding-bottom: 6px;
    color: #ccc;
}

Answer 3

<button>一种方法是完全摆脱标签并<a href=".." />在其位置使用您想要的样式的标签。

只需让链接执行 JavaScript 回发即可。

更新（来自评论）：
一个例子：

<a href="#" onclick="document.formName.submit();">Click Here</a>

当然，这需要启用 JavaScript，并且有些人认为这是对锚标记的滥用。

如果您使用 .net webforms 或 jQuery，还有替代版本。