input要素などにおけるIEのバグ

ちょっと、はまったのでメモ書き

IE6やIE7では、margin-leftとwidthが指定されたブロックレベル要素内の行ボックスの先頭にinput要素やtextarea要素がある場合、適切な位置に配置されないというもの。

select要素などは適切に配置される。

CSS

p{
	margin-left:50px;
	width:100px;
}

HTML

<p><input type="text" /></p>
<p><textarea></textarea></p>
<p><select><option>test</option></select></p>

サンプル

とりあえずmargin値で余白をとるのではなくpadding値を指定することで対応。

関連エントリー

operaでのfloatの挙動
IE7でページが表示されない件について
IE7用のCSSハック
Virtual PCを使いIE6,7で検証できる環境を作る
CSS が valid でなければいけない理由

スポンサードリンク

«ソーシャルブックマークをコンテンツとして使用する方法 | メイン | パブリッシャーバズで紹介していただきました»