Button中的保证金在浏览器中有所不同

Question

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

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

我在http://codepen.io/mdmoura/pen/eKALE

中有一个例子

在Firefox中完全按照我的预期......

但在谷歌，Chrome和Safari中，按钮的顶部和底部有1个像差距。

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

谢谢你， 米格尔

Answer 1

删除line-height:1并将margin:0添加到form input。

JSFiddle

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

JSBin - 在IE10，safari，firefox和chrome中测试过。

Answer 2

搜索框的计算高度为34px，比按钮高2px（您可以将搜索框的填充更改为7px而不是8px来修复）。

此外，搜索输入和按钮都是inline-block，这将导致元素之间的差距。要删除该间隙，请删除源中的任何空格：

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