css - ボタンの余白がブラウザで異なる

Question

次のようにレスポンシブ検索フォームを作成しました。

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

Firefoxでは、私が期待したとおりに見えます...

しかし、Google、Chrome、Safari では、ボタンの上下に 1px の隙間があります。

すべてのブラウザで同じように表示するにはどうすればよいですか?

ありがとう、ミゲル

score 0 · Accepted Answer

検索ボックスの計算された高さは 34px で、これはボタンより 2px 高くなっています (検索ボックスのパディングを 8px ではなく 7px に変更して修正できます)。

さらに、検索入力とボタンの両方がinline-blockであるため、要素間にギャップが生じます。そのギャップを取り除くには、ソース内のそれらの間の空白をすべて削除します。

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

2 に答える 2