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

Question

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

opacity

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