Css 不同浏览器中按钮的边距

我创建了一个响应式搜索表单，如下所示：

<form class="search" action="#" method="get">
  <input type="search" id="search">
  <input type="submit" name="submit" value="search">
</form>

我在这方面有一个例子

在Firefox中看起来和我预期的完全一样

但在谷歌、Chrome和Safari中，按钮的顶部和底部有1倍的间隙

如何使它在每个浏览器中看起来都一样

谢谢,，

---

Miguel

搜索框的计算高度为34px，比按钮高2倍（您可以将搜索框的填充改为7px，而不是8px，以解决此问题）

此外，搜索输入和按钮都是

内联块

，这将导致元素之间出现间隙。若要删除该间隙，请在源代码中删除它们之间的任何空白：

<form class="search" action="#" method="get">
  <input type="search" id="search"><input type="submit" name="submit" value="search">
</form>

---

删除

行高：1

并将

边距：0

放入

表单输入

要使其在每个浏览器中看起来“相同”，请使用

---

-在IE10、safari、firefox和chrome中进行了测试。

在JSBin示例中，现在按钮似乎比搜索输入高了一点。。。