html - 文本输入和提交输入元素在 Firefox 中具有不同的高度

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/ )

创建 2 个不同高度的输入元素(提交大 ~1px)。

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

Answer 1

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

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

删除填充:

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

 .class { padding: 0 }

使用 EM 高度:

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

 .class {
     height: 1.5em
 }

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