Html 删除按钮上的 3D 推送效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5466906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove 3D push effect on a button
提问by Diesal11
I'm trying to remove all effects on a HTML Button element. The HTML:
我正在尝试删除对 HTML Button 元素的所有影响。HTML：
<div id="go">
<button onclick="load.update(true,cards.id);" type="submit"></button>
</div>
The CSS:
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.
}
In Chrome and Firefox this works fine, but in IE (8 at least) the "push" effect of the button is still there when the button is clicked (EG the offset) Is there any Tricks i can use to remove this effect? Thanks in advance! Diesal.
在 Chrome 和 Firefox 中，这工作正常，但在 IE（至少 8）中，单击按钮时按钮的“推”效果仍然存在（例如偏移量）我可以使用任何技巧来消除这种效果吗？提前致谢！迪萨尔。
采纳答案by NotMe
One way would be to get rid of the <button>tag completely and use a <a href=".." />tag in its place styled the way you want.
一种方法是<button>完全摆脱标签并<a href=".." />在其位置使用您想要的样式的标签。
Just have the link do a javascript postback.
只需让链接做一个 javascript 回发。
update (from comments):
one example:
更新（来自评论）：
一个例子：
<a href="#" onclick="document.formName.submit();">Click Here</a>
Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.
当然，这需要启用javascript，并且被一些人认为是对锚标记的滥用。
There are alternate versions if you are using .net webforms or jQuery.
如果您使用 .net webforms 或 jQuery，则有替代版本。
回答by Mark
you need to add background styles to :hover :active :focus as well.
您还需要将背景样式添加到 :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');
}
回答by allicarn
I had a similar experience, and was able to fix it in IE8, but not IE7. See it working here: http://jsfiddle.net/GmkVh/7/
我有类似的经历，并且能够在 IE8 中修复它，但不能在 IE7 中修复它。看到它在这里工作：http: //jsfiddle.net/GmkVh/7/
HTML:
HTML：
<button></button>
CSS:
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;
}
回答by iAnton
<div class="calculation_button">
<button type="submit"><span>Count</span></button>
</div>
.calculation_button span {
position: relative;
left: 0;
top: 0;
}
works for me in IE and FF
在 IE 和 FF 中对我有用
回答by sdo
After you have done whatever you like with the border etc., just put a span inside the button around the text like so:
在你对边框等做了任何你喜欢的事情后，只需在文本周围的按钮内放置一个跨度，如下所示：
<button class="button" type="submit"><span class="buttonspan">Blah</span></button>
<button class="button" type="submit"><span class="buttonspan">Blah</span></button>
Then the CSS becomes:
然后 CSS 变成：
button {position:relative; width:40px; height:20px /* set whatever width and height */}
buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
回答by Pocketninja
Position relative seemed to have taken care of the problem
职位相对似乎已经解决了这个问题
Simply have a wrapper within the button:
只需在按钮内有一个包装器：
So
所以
<button>
<div class="content">Click Me</div>
</button>
and set the DIV to position relative with top: 0, left: 0
并将 DIV 设置为相对于 top: 0, left: 0 的位置
Example below:
下面的例子：
回答by teefars
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
这是一种浏览器行为，一个简单的解决方案是使用链接标签而不是按钮（因为您正在调用 javascript 函数）。
<a href="#" onclick="myfunction()" role="button"><img src="myimg"/></a>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
如果你仍然想使用 ，我发现每个浏览器都有一些特性（在一个简单的调试中）：
- Chromeadds outline and padding
- Firefoxadds a whole lot of stuff with the standart button border
- IEmesses with the inner text position
- Chrome添加了轮廓和填充
- Firefox添加了大量带有标准按钮边框的东西
- IE弄乱了内部文本位置
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
因此，要修复它们，您必须操纵按钮行为的伪选择器。而对于 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>
回答by robocat
The following helped for me in IE 10:
以下在 IE 10 中对我有帮助：
button:active {
position: relative;
top: -1px;
left: -1px;
}
It fixed the top perfectly, but left still had background bleed-though for my case. Still looks a bit odd if the user starts clicking and then moves the mouse off the button. Also obviously only enable the rule for relevant IE version(s).
它完美地固定了顶部，但左侧仍然有背景出血 - 尽管对于我的情况。如果用户开始单击然后将鼠标从按钮上移开，仍然看起来有点奇怪。同样显然只启用相关 IE 版本的规则。
