Html 移除按钮上的三维推送效果

我正在尝试删除HTML按钮元素上的所有效果。 HTML：

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

在Chrome和Firefox中，这很好，但在IE（至少8）中，当按钮被点击时，按钮的“推”效果仍然存在（例如偏移） 有什么技巧可以用来消除这种效果吗？ 提前谢谢！

---

Diesal。

您还需要将背景样式添加到：悬停：活动：焦点

#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');
}

---

一种方法是完全去掉

标记并使用

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

---

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

在对边框等做了任何处理后，只需在文本周围的按钮内放置一个span，如下所示：

Blah

然后CSS变成：

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

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

---

我有过类似的经历，能够在IE8中修复它，但在IE7中没有。看到它在这里工作：

HTML:

<button></button>

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

---

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

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

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

计数
.计算按钮跨度{
位置：相对位置；
左：0；
排名：0；
}

---

在IE和FF中为我工作的相对职位似乎已经解决了这个问题

只需在按钮中添加一个包装：

所以

点击我

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

示例如下：

---

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

如果您仍然想使用，我发现每个浏览器都有一些特性（在一个简单的调试中）：

• Chrome添加轮廓和填充
• Firefox添加了大量standart按钮边框
• 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>

按钮或图像
按钮
按钮：焦点，
按钮：激活{
边框：1px纯黑；
背景：无；
大纲：无；
填充：0；
}
按钮跨度{
位置：相对位置；
}

---

所有状态下的背景图像都仍然存在，只显示偏移量和边框。您还需要为每个状态设置填充。这就是创建偏移量的原因。但也要确保为正常状态设置了匹配的填充。这解决了IE8中的边界问题，但按时仍然是偏移。您尝试过线条高度吗？如果它偏移了顶部->底部，那么它可能是一个线高度问题。我如何将它链接到井上…尽管没有？如果我在标签上添加一个Onclick事件处理程序，但是如何阻止它链接到另一个页面；我在一台新的笔记本电脑上，不小心按下了enter hahaJust a，这是无效的标记，因为链接不应该像按钮一样，反之亦然。带有

href

属性的锚定标记只能用于更改页面或打开新选项卡/窗口的链接。页面功能应始终使用

按钮

标记。重复的问题只有我找到的正确答案：。

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

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

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

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

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

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