css - 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 中看起来完全符合我的预期......

但在 Google、Chrome 和 Safari 中，按钮的顶部和底部有 1px 的间隙。

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

谢谢， 米格尔

Answer 1

删除 line-height:1 并将 margin:0 放入 form input。

JSFiddle

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

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