コメントの位置を変更しよう
divタグの終了位置などをわかりやすくするために、(X)HTMLソースにコメントを記述しておくケースは非常に多いです。しかし、IE6及びIE7ではコメントを入れる位置によってフロートボックスの位置がすれてしまうバグがあります。
これはフロート指定がある要素の前にコメントを置いた場合に発生します。これを回避するには、問題になっている箇所のコメント自体を削除するか、コメントは要素内に記述する必要があります。コメントによる位置すれは、IE6とIE7でずれ方が異なるのでチェックする際には注意しましょう。
#main {
float:left;
width:480px;
background:#fff;
}
(省略)
CSSには特別な指定はせず、floatプロパティで並べている。(X)HTMLにコメントがなければきちんとボックスがそろう。
div id="main"
h2メインエリア/h2
div class="item"
p text p
/div
div class="item" (省略)
IE7で見た場合、フロート指定がある要素の前にコメントを置くと余白が一部うまってしまいます。
