永続的な余裕と1ピクセルの高さの差

Question

私は入力要素に問題を抱えている：その絵に自分のCSSは、彼らはまだその持っている

margin: 0; 
padding: 0; 

ですが

わずかなマージンを取り除くことはできません。ボタンをテキストフィールドの近くに置くには、-4pxの負のマージンを使用する必要がありました。

さらに、私はFirefoxとChromeの間に問題があります。 送信ボタンは同じ高さではないようです。 Chrome上の入力バーと一緒に送信ボタンを合わせる高さを設定すると、Firefox上でそれを分割したり、その逆もあります。明らかな解決策はないようです。あなたはクローム（右）ボタンと入力フィールドに完璧にフィットところ、Firefoxで、彼らは1ピクセルの高さの差があるでしょうことを確認することができ、画像で

1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png

。

これらの2つの問題（永続的なマージンと1pxの違い）の解決法はありますか？

---

編集：私は最初の問題を修正した、それは二つの要素は、HTMLコード内の改行で区切られたという事実によって引き起こされました。

Answer 1

これを試す：demo fiddle

HTML：

<span><input type="text" /><input type="submit" /></span> 

はCSS：IE8、IE9、オペラ11.50、サファリ5.0.5、FF 5.0、クロム12.0でWin7の上でテストさ

span, input { 
    margin: 0; 
    padding: 0; 
} 
span { 
    display: inline-block; 
    border: 1px solid black; 
    height: 25px; 
    overflow: hidden; 
} 
input { 
    border: none; 
    height: 100%; 
} 
input[type="submit"] { 
    border-left: 1px solid black; 
} 

。通常のボタンのような送信入力を頑強に表示するので、IE7だけが失敗します。あなたの第二の問題については

Answer 2

（左）ボタンがChromeでより2ピクセル背が高い（右）二つの要素の形状を強調することによって を、あなたはFirefoxでそれを見ることができます： 第二の問題は、あなたがここに見ることができるように、しかし、持続します私の考えでは、CSSはあなたの入力レイアウトと干渉しているようです。

http://jsfiddle.net/F3hfD/1/あなたが何を求めているのかは問題なく解決できます。

Answer 3

、私はボタン型として使用画像=「提出」とそれに隣接する入力と全く同じ高さではなかった、同様の問題についてHow to reset default button style in Firefox 4 +

Answer 4

を参照してください、私は単純に

padding-bottom:1px; 

Answer 5

Iは上部に挿入された入力に次のスパンにglyphiconを有していた：1ピクセルの入力を前記2の容器にこれを追加しました。 スパンにtop：0pxを設定して、問題は修正されました。 しかし、スレッドの実際の答えは完全に問題があり、ユーザーは要素をよりよく理解して修正する必要があります。