影響版
バグの影響: IE7, IE6
現れ
<input>要素と<textarea>要素は、margin属性とレイアウトを持つ親ノードから水平マージン属性を継承します。
チュートリアル開催日
2009-08-17 22:37:49 Mon
説明
Gérard Talbot さんの IE7 Bugs Collection ページで見つけた別のバグです。 Double Margin Bug に新しい症状が現れ、IE7 で表示されるようになりました。主な症状は <input> 要素と <textarea> 要素に影響します。例を見てみましょう。
代表例
例は別ページにあります。
注意: このデモは合法的なHTMLマークアップを示していますが、HTMLフォームを作成する適切な方法ではありません。
HTMLコード
<form action="">
<div>
<input type="text" name="ber">
<textarea cols="10" rows="5" name="baz"></textarea>
<select name="ber"><option>foo</option></select>
</div>
</form>
CSSコード：
div {
margin-left: 100px;
width: 100%; /* gives "layout" */
}
今、レイアウトを持ち、margin-left属性が設定されている親ノードがあります。IE6とIE7では、<input>と<textarea>要素は親ノードである<div>からmargin属性を継承したかのように振る舞い、margin属性の値が二重に重なります。親ノードに margin-right 属性を設定しても同じ結果になります。より強力なブラウザでは、<input>と<textarea>要素は<select>と縦に並ぶべきです。
解決方法
以下は、上記の問題に対する解答を、解答タイプ別に並べたものです。
処方
解答日
2009-08-17 22:37:49 Mon
校閲
影響を受けるすべてのバージョン
説明
このバグの修正は、かなり乱暴で簡単な解決法です。一緒に見てみましょう：修正例は個別ページページにあります。
HTMLコード
<form action="">
<div>
<input type="text" name="ber">
<textarea cols="10" rows="5" name="baz"></textarea>
<select name="ber"><option>foo</option></select>
</div>
</form>
CSSコード
div {
margin-left: 100px;
width: 100%; /* gives "layout" */
}
<!--[if lte IE 7]>
<style type="text/css">
input,
textarea {
margin-left: -100px;
}
</style>
<![endif]-->
注意：私がCSSで定義した選択条件は、そのまま使ってもかまいません。バグに関連するフォーム要素にのみ適用することで、その中の負の数のマージンを必ず修正してください。
