移除按钮上的 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）中，当单击按钮时，按钮的“推送”效果仍然存在（例如偏移量） 有什么技巧可以用来消除这种效果吗？ 提前致谢！ 柴油机。

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 class="button" type="submit"><span class="buttonspan">Blah</span></button>

那么CSS就变成了：

button {position:relative; width:40px; height:20px /* set whatever width and height */}

buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Answer 4

<div class="calculation_button">
  <button type="submit"><span>Count</span></button>
</div>

.calculation_button span {
position: relative;
left: 0;
top: 0;
}

在 IE 和 FF 中为我工作

Answer 5

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

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

更新（来自 cmets）：
一个例子：

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

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

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

Answer 6

以下内容在 IE 10 中对我有帮助：

button:active {
  position: relative;
  top: -1px;
  left: -1px;
}

它完美地固定了顶部，但在我的情况下，左侧仍然有背景出血。如果用户开始单击然后将鼠标从按钮上移开，看起来仍然有点奇怪。同样显然只启用相关 IE 版本的规则。

Answer 7

相对位置似乎已经解决了这个问题

只需在按钮内有一个包装器：

所以

<button>
   <div class="content">Click Me</div>
</button>

并将DIV设置为相对于top: 0, left: 0的位置

下面的例子：

http://jsfiddle.net/eyeamaman/MkZz3/

Answer 8

这是一种浏览器行为，一个简单的解决方案是使用链接标签而不是按钮（因为您正在调用 javascript 函数）。

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

如果你还想用，我发现每个浏览器都有一些特点（在简单的调试中）：

• Chrome 添加轮廓和内边距
• Firefox 使用标准按钮边框添加了很多东西
• IE 与内部文本位置混淆

因此，要修复它们，您必须操纵按钮行为的伪选择器。而对于 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

This is a duplicate question