Question

代码：

<input class="text" type="text" value="text"><input class="submit" type="submit" value="submit">

带样式：

.text, .submit {
    outline: none;
    border: none;
    padding: none;
    margin: none;
    background: red;
    padding: 3px;
    box-sizing:border-box;
}

（https://jsfiddle.net/citizenfive/04camn42/）

创建两个具有不同高度的输入元素（提交大于〜1px）。

代码在Chrome上正常运行。有没有办法为Firefox解决这个问题？

Answer 1

所有浏览器在默认行为和样式之间都存在差异，但是对于S.O.，firefox更灵活。表单元素由操作系统默认控制。

解决方案是移除填充或使用EM测量高度。

删除填充：

https://jsfiddle.net/04camn42/2/

 .class { padding: 0 }

使用EM高度：

https://jsfiddle.net/04camn42/3/

 .class {
     height: 1.5em
 }

如果您使用EM，您不必担心响应能力和用户选择。

Answer 2

删除了填充并增加了高度，这在Chrome和Firefox中运行良好，但我不知道此修复是否适合您。

新css，

.text, .submit {
  outline: none;
  border: none;
  padding: none;
  margin: none;
  background: red;
  /* padding: 3px; */
  box-sizing: border-box;
  height: 23px;
}

Answer 3

为了从Firefox的按钮和输入中删除所有填充和边框，这个方便的小CSS片段将帮助你。

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

此外，其他海报也提出了建议：在所有表单元素上使用box-sizing: border-box;，使其在所有浏览器中都能运行（除了Firefox）。

Answer 4

.text, .submit {
    outline: none;
    border: none;
    padding: none;
    margin: none;
    background: red;
    padding: 3px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

见我

文本输入和提交输入元素在firefox中有不同的高度

4 个答案:

删除填充：

使用EM高度：