css - 浏览器中按钮的边距不同

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 中测试。

Answer 2

搜索框的计算高度为 34 像素，比按钮高 2 像素（您可以将搜索框的内边距更改为 7 像素而不是 8 像素来解决此问题）。

另外，搜索输入和按钮都是inline-block，这会导致元素之间出现间隙。要消除该间隙，请在源代码中删除它们之间的任何空格：

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