按钮高度不一致（跨浏览器） [英] Button height inconsistency (cross-browser)

问题描述

我在设置按钮的高度时遇到问题。基本上我不能管理它有跨浏览器。对于Firefox，它高于正常，没有任何原因。

这是一个截图（Firefox，Safari和Opera， ：

此处的代码：

I'm having a problem whilst setting the height of a button. Basically I can't manage to have it cross-browser. With Firefox, it is higher than normal, without any reason.

Here it's a screenshot (Firefox, Safari and Opera, in this order):

And here the code: http://jsfiddle.net/TMUnS/2/

I also tried adding some specific declarations I found on the web, but actually they just reduced the height a bit, but still, they aren't the same (in the same order):

And here the code: http://jsfiddle.net/TMUnS/4/.

How could I fix this?

解决方案

Firefox has this funny thing called -moz-focus-inner. I'm not totally sure what it's for, I just know that you sometimes need to do this to get buttons to behave:

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
    padding:0;
    border:0;
}

That might be what you need. You can see the difference here (in Firefox): http://jsfiddle.net/TMUnS/9/

这篇关于按钮高度不一致（跨浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！