Chromeで奇妙なCSS間隔の問題が発生しています（FirefoxやIEでは発生しません）
Firefoxの「不動産検索」（H2タグ）と「サンフランシスコ、カリフォルニア」のフォーム入力フィールド（＃city-field入力タグ）の間の垂直方向の間隔は完璧ですが、ChromeではChromeがより多くの/余分な垂直方向を適用しています必要以上の間隔。
役立つように、スクリーンショットを添付しました。赤い線は、ChromeがFirefox/IEでは追加していない余分な間隔を表しています。
ChromeがFirefoxやIEよりも多くの間隔を適用する理由についてのアイデア。
そして、この問題を修正する方法。
前もって感謝します
アップデート
また、「リセットスタイルシート」を使用して、すべてのブラウザでH2間隔などを標準化しています。これは、上記のリンクされたHTMLドキュメントにありますが、まだこの問題が発生しています。
リセットスタイルシートを使用します。
さまざまなブラウザが、H1、H2、UL、LIなどのタグのCSSルールをさまざまな方法で解釈します。これらには、パディングとデフォルトのフォントサイズが含まれます。リセットスタイルシートはそれらすべてを取り、デフォルトを削除して、必要に応じて独自の値に置き換えることができるようにします。
Web Inspectorによると、Chromeでは、入力タグの上下に2pxの余白があります。ただし、Firefoxでは、Firebugはこれと同じ入力に対してマージンを示しません。CSSで以下を使用します。
#city-field {margin:0}
編集：入力がdisplay：inline-blockに設定されているため、余分な間隔が発生しています。display：blockに変更すると、スペースが消えることに気付くでしょう。代わりに、floatとdisplay：blockを使用してコンテンツをインライン化してみてください。
線の高さが原因だと思います。h2の線の高さを13〜15ピクセル程度に設定してみてください。デフォルトでは、通常に設定されています。W3Cによると、line-height：normal「要素のフォントに基づいて使用される値を「合理的な」値に設定するようにユーザーエージェントに指示します。」FirefoxとChromeは、まったく異なるレンダリングエンジンで構築されているため、異なる「合理的な」値を設定している可能性があります。