IE7入力位置のバグ（粘着性！）

このページをチェックアウト：http://jsbin.com/itufix IE（ページは自動的にIE7モードを有効にします）。IE7入力位置のバグ（粘着性！）

ここでは、インライン要素（入力とスパン）が表示ブロックと同様にレンダリングされる例を見つけることができます。すべての要素のマージンとパディングが0に設定されています。 IE（IE8-9）用の開発ツールを使用している場合、入力にオフセットが表示されていることがわかりました：

実際に何が起きているのか、？入力にフロートを追加

NOTES

は、この問題を解決するが、これはオプションではありません。私はフロートなしでこれを行う必要があります。
入力/スパンとそのdivの親プロパティhasLayoutの値はtrueです！
このバグに関する情報は大歓迎です。

UPDATE：http://jsbin.com/itufix/13：ここはスタイルが使用されている方法の例です。各フィールドには説明があり、さらにdiv.form-item全体が浮動することがあります（複数のフィールドが必要な場合）

出典

2012-01-19 jrumbinas

この例を見るだけで、入力の内部パディングがスパンのパディングよりも小さいことがわかります。これはわずかなオフセットを説明するかもしれない。 – Deadlykipper

この「内部埋め込み」とは何ですか、どのように測定しますか？ – jrumbinas

私はすべての入力をdivに入れ始め、フォント以外のすべての入力プロパティを0、透明などに設定しました。すべてのプロパティはコンテナdivによって設定されます。あなたは何か変なパディングやマージン、背景など何かでクロスブラウザーを使うことは決してありません – ggzone

inputをフロートできない場合はどうすればいいですか？この：回避策のみIE7で適用されるので、a CSS hackを使用しています

*+html input { 
    margin-top: -1px; 
    margin-bottom: -1px; 
}

http://jsbin.com/itufix/5

。

出典

2012-01-19 11:00:45 thirtydot

入力の詳細。実際の構造は

[Extra elements]

で、2つのモードがあります。1.非浮動DIVコンテンツ（全幅を使用）。浮動DIVコンテンツ。 – jrumbinas

これは受け入れられるハック、ありがとうございます。それには欠点があります：入力上端/下端余白は、IEスタイルを制動するように注意して設定する必要があります。 – jrumbinas

真実ですが、軽減することは特に難しいことではありません。次は、「margin：5px 0」の例です：http://jsbin.com/uwimok/edit#html,live。私の "実際の構造"のデモを見ることができれば、他のブラウザとIE7の間で同じように見えるようにする良い方法を見つけることができるかもしれません。 – thirtydot

あなたのCSSを見て、私は以下を参照してください。

div.form-item{ 
    padding: 0 1px; 
}

padding:0;にこれを変更するには、私の目にフォームフィールド上のすべてのパディングを削除しているようです。参照：

http://jsbin.com/ojeros/2/

または私は何かが足りないのですか？

出典

2012-01-30 18:46:40 Mig

IE7でこのバグが発生しています。 – thirtydot

私はこれを複製できませんでした。 JSBinを使用すると、IE7/8/9で同じように見えましたが、私はそれを見逃していた可能性があります。 – Mig

IE7入力位置のバグ（粘着性！）

答えて

関連する問題