Internet Explorer 9のオーバーフローを解決する方法リストに表示されるフォーム要素と "表示：テーブル"ベースのレイアウト

Question

意味と軽量のマークアップを使用してHTMLフォームを構築したい。各（ラベル、入力）は、liノード、ulの子、formの子の内部にネストされています。 CSSに関する限り、formの中にあるulはテーブルとしてレイアウトする必要があります。リストアイテムはテーブル行としてレイアウトし、ラベルと入力の両方をテーブルセルとしてレイアウトする必要があります。

は、ここで私はクローム17.0.963.79、オペラ11.61、サファリ5.0.2、Firefoxの8.0とさえIE 8.0.7601.17514に上記のデモを試してみたa demo

だし、私はそれが望むように見えます。

しかし、それはIE 9.0.8112.15421は、いくつかの計算が間違っを取得するようだ：要素が、私はそれらをしたいスペースを取り、開発ツールは、望ましくないマージンやパディング、まだ含む明らかにフォームを表示しないli（決してliul！ - デモを参照）は、追加されたラベルの幅を2回取得し、の場合にはが不一致になり、その結果、その祖先に水平スクロールバーが追加されます。なぜそれが起こっているのですか？どのように修正することができますか？

Answer 1

float:right〜form li inputを追加し、Chromeと同様のIE9で結果を得ました。