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 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

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

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

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

Answer 6

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

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

所以

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

并将DIV设置为相对于top的位置：0，left：0

以下示例：

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

Answer 7

这是一种浏览器行为，一个简单的解决方案是使用链接标记而不是按钮（因为您正在调用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

Answer 8

一种方法是完全删除<button>标记，并在其位置使用<a href=".." />标记，以您希望的方式设置样式。

让链接执行javascript回发。

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

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

当然，这需要启用javascript并被某些人视为滥用锚标记。

如果您使用.net webforms或jQuery，则有备用版本。

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

8 个答案: