Html 统一表单输入高度的CSS

这个总是让我讨厌

CSS

/* reset */
input,button { 
     margin:0;padding:0;border:0;
     font-family: inherit; font-size: inherit;
     line-height:1em; }

/* apply some style */
input,button { padding:.5em; }
input { background-color:#fff; }
button { background-color:#333; color:#fff; }

/* for display example */
body { padding:3em; font-size:2em; }
div { background-color:#ccc; padding:.5em }

标记

<div>
   <span><input type="text" value=" the input value "/></span>
   <span><button> A button</button></span>
</div>

钮扣

所以， 给定足够的宽度和跨度，以启用内联显示

为什么它们的高度不同？

以上代码为

---

变通办法一直遵循以下原则：

1） 指定一个高度-很好，如果使用ems更好，但是真的吗

2） 包装元素（如示例中的div和span）并设置包装器的样式（有效地为输入/按钮提供了在不同浏览器中有所不同的空间）

---

希望我在旅行中错过了一段css

关于这个主题的大多数搜索结果都指向了解决方法

---

谢谢

从按钮上删除

行高：1em

将其固定在铬合金中。对于Firefox，添加此选项可以修复它：

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
    margin-top:0px; 
    margin-bottom: 0px; 
}

适用于Chrome和Firefox

---

这是因为当您重置常用浏览器默认值（如边距和填充）时，您继承了字体大小，并且按钮上的字体大小与输入字段的字体大小略有不同

如果在按钮中指定字体大小，输入{}样式，它们将立即变为完全相同的大小

此外，“em”是相对的，即使您在元素上将它们设置为零，它们仍然被引用以计算“em”将是的相对值

因此，请指定字体大小，如果您想要绝对字体，请不要使用ems，它将变为相同的大小

---

尽管在某些情况下，解决方法可能更好。

有一个名为normalize.CSS的CSS脚本（可以链接，但在移动设备上）。更全面的重置版本。我建议链接到它，而不是把它放在每个CSS文件中。试着补充一下，我发现它给了我一致性

添加链接：

A按钮
.包裹{
宽度：100%；
}
span.btn{
宽度：40%；
}
span.inputfield{
宽度：60%；
显示：内联flex；
}

在收到两个很好的答案后，这是一个

1） 从@Aphol关于删除

行高

或设置

行高：正常

2） 从@indofraiser使用normalise，其中包含

：-moz焦点内部

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

答案是两者的结合——这很有效，感觉也很好，因为在设置行高：正常后，firefox上仍然存在高度差（但这是迄今为止最接近的），然后是

：：-moz focus internal

将其消除

谢谢你们两位-两个答案的最后组合在这里-

---

再次感谢，再见了，解决办法！太好了。

这里有一把更好的小提琴，可以看到高差a，谢谢@HuangismThreak@i-conica。感谢您的答复。“不要使用EMS”有点难以接受，但是字体继承，是否“继承”对探索如此感兴趣以至于你说字体大小不同。ace，这让我很接近，（ff更大（一点点）事实表明，设置线高度的重置会造成问题。但这离大坝很近，在大多数情况下都会起作用。谢谢you@RobSedgwick很高兴提供帮助！啊哈，这是个好时机，正如我你所看到的，我刚刚在自己身上添加了这个答案！-太好了，这两个地方都保留了答案。谢谢！谢谢@indofraisure，我使用normalise和resets，如果这样做的话，可能是我有一些“不规范的东西-：：-moz focus inner从它看起来很有希望，我会给它更多的调查。

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