float されたブロックの text-align

MacIE5.1.4 (MacOSX) で見る限り、あるブロックレベル要素を float:left / float:right とすると、 text-align:center だけが効かなくなりますやね( text-align:left / text-align:right は効く)。 CSS 解釈バグですねコリャ。これは、 float されたブロックの直接の子要素に、何のインライン要素にも内包されてない生の文字列(匿名インラインボックス)がある場合に起きるみたい。

下の例は <p>TEXT</p> というマークアップに p { float:left } を指定。順に text-align:left / text-align:center / text-align:right にしてます。

TEXT

TEXT

TEXT


ところが、直接子要素が何がしかのインライン要素のみで構成されてて、匿名インラインボックスの無い場合は、text-align:center が正常に効く。なんだこりゃ。

下の例は、p { float:left; text-align:center } して、 <p><span>TEXT</span></p> としてます。

TEXT


ブロック系要素を子要素に持てるブロック要素に text-align:center なブロック要素を入れ、親要素で float 指定したばあいも正常に効く。まぁこれは当然のハナシ。

下の例は、div { float:left } p { text-align:center } して、 <div><p>TEXT</p></div> としてます。

TEXT