Firefox中的不同填充输入和按钮

Question

我有一个搜索输入字段和一个直接在输入字段旁边的提交按钮。它们具有相同的填充，但Firefox将1px添加到按钮填充，但不添加到输入填充。行高会使情况变得更糟。有没有人为此提供解决方案？

.form, 
button { 
padding: 5px; 
font-size: 12px; 
border: 1px solid black; 
box-sizing: border-box; 
} 

<input type="text" class="form" placeholder="Text" /><button class="button">Click</button> 

http://jsfiddle.net/r5y7byag/4/

Answer 1

这将修复它

button::-moz-focus-inner { 
    padding: 0; 
    border: 0 
} 

包括上述边框的规则是必要的按钮看起来相同的两种浏览器。

当按钮在Firefox中处于活动状态时，它还会删除虚线轮廓。

要解决它的输入元素藏汉补充：

input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 

Answer 2

看到这个fiddle

CSS：

.form, 
button { 
font-size: 12px; 
border: 1px solid black; 
box-sizing: border-box; 
line-height:30px; 
padding-left:5px; 
}