HTMLフォームの整列 - ラベル付きの入力

Question

私はこれをすべてのブラウザで利用できるようにしようとしています。異なるブラウザーが異なる結果を出しています（IEでは最も問題があります）。あなたが私が何を話しているかを見ることができるようにスクリーンショットを含めました。

これは、フォームはサファリ、FirefoxとChromeでどのように見えるかです：

http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/

これは、フォームはIE6とIE7でどのように見えるかです：

http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/

そして、これはIE8とIE9です：

http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/

HTML

<form method="post" action="?test" id="form"> 
    <label for="user">USERNAME</label> 
    <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required /> 
    <div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div> 
    <label for="password" class="clear">PASSWORD</label> 
    <input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required /> 
    <div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div> 
</form> 

CSS

label { 
    background: yellow; 
    font-size: 12px; 
    font-weight: bold; 
    width: 100px; 
    float: left; 
    margin-right: 50px; 
    text-align: right; 
    cursor: pointer; 
} 

input { 
    height: 30px; 
    background-color: #fafafa; 
    border: 1px solid #abaaaa; 
    width: 300px; 
    margin: 5px 0 5px 0; 
    float: right; 
} 

私の質問は、ラベルをどのように入力フィールドと垂直に揃えることができるのですか？私はここで検索しましたが、ほとんどの場合、何かのようなものを使用しました。

vertical-align: middle; 

が推奨されていますが、これはまったく機能しません。 Safari、Chrome、Firefoxの唯一の修正点は、ラベルに余白部分または余白部分を追加することですが、IE8およびIE9ではその部分が破棄されます。

この問題についてはどうすればよいですか？入力フィールドの高さを落とすことは私の選択肢ではありません。

Answer 1

clear:bothを入力タグ（どこか）の後に置く。

余分なカスタマイズのためにフォームにマークアップを追加することをお勧めします。通常、私はこのような形式をしたいと思っています：

<div class="field"> 
    <label for="user">USERNAME</label> 
    <div class="field-subject"> 
     <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required /> 
    </div> 
</div> 

.field { 
    overflow: auto; /* this "clears" the floated elements */ 
    margin-bottom: 10px; 
} 

.field label { 
    float: left; 
    width: 200px; 
} 

.field .field-subject { 
    float: left; 
    width: 500px; 
}