TOP  >  CSSバグ/バグ回避法  >  IE6でflaotした最後の要素だけが繰返す現象の回避法

2012年05月09日 18:59

IE6でflaotした最後の要素だけが繰返す現象の回避法

いつものようにdivのボックス要素をfloatして繰り返すという形でCSSを設定していたところ、
IE6のみ最後のボックス要素が繰り返す現象が発生。
静的要素でかつHTMLソース上は要素が複数なわけでもなく、
IE6だけ最後の1つのボックス要素がループしているかのように表示されていました。

Movable typeに組み込んでいたので、
テンプレートを修正したり、Javascriptを外してみたりしましたが、
それが原因ではなく、意外なところにありました。



floatしたボックス間の空のコメントが原因

今回ボックスの要素間に空のコメントタグを入れていたのですが、 それを取り除くとflaotした要素が繰返す現象がなくなりました。 ボックス間にコメントがあると、最後の要素が繰り返してしまうようです。

IE6が要件になることもかなり減って来ましたが、
特にMovabletypeやWordpressなどCMSを使ったりしたときに、
ふとコメントが入ってしまったりすることもあると思うので、
一応注意が必要かもしれません。

TOP  >  CSSバグ/バグ回避法  >  IE6でflaotした最後の要素だけが繰返す現象の回避法




正当なCSSです!