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

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

Different padding input and button in Firefox

html

css

input

padding