IE6・７でinputタグに余計なマージンが発生するバグの対処

margin-leftとwidth指定したブロック要素（以下の例ではformタグ）の直下にinputやtextareaがある場合に余計なマージンが発生します。

→こんな感じのバグ

CSS

 
* {
   margin: 0;
   padding: 0;
}
form {
   width: 300px;
   background-color: #FFCCCC;
}
 
form p {
    margin: 0 0 0 20px;
    width: 240px;
    background-color: #CCCCFF;
}
p .search {
    width: 150px;
    height: 24px;
}
 

HTML

 
<form>
    <p>名前：<input name="" value="" /></p>
</form>
 

原因を突き止めようとググって探し回ったのですが、結局、原因不明。なので無理矢理ですが以下の方法で対処しようかと。

解決案

 
<form>
    <p><label for="name1">名前：<input name="name1" value="" /></label></p>
</form>
 

→余計なマージンの発生を防ぐサンプル

inputタグをもう一つ別のタグ（今回はlabelタグ）で囲みformの直下に来ないようにしました。

※ただし、<label>～</label>内にフォーム部品とテキストを含める方法だと、IE5やIE6には関連付けられたテキスト部分をクリックしてもそのフォームを選択することはできません。テキストとフォームを関連付けたい場合は<label>タグのfor属性の値と、フォーム部品のid属性の値を同じものにする方法がいいと思います。