IE9 ベータ版でレイアウトが上手くいかない。ので回避策。その２。

[ 2011.02.12追記 ]
IE9 製品候補版では、この記事で取り上げた不具合は解消されたみたい。
この記事は最早、読む必要はありません。

前回の記事で、検証をやり残していたパターンがあるという事に気付いたので追加。

IE9 βでは、float: left; または float: right; が指定されている要素の中では、float: right; を指定した要素たちが正しくレイアウトされない。

ということでした。詳しい実例などは前回の記事を見てください。

回避策のひとつとして、

div#container{ /* 親要素 */
 float:left;
 direction: rtl;
}
div#right{ /* 子要素その1 */
 float:right;
 border:solid 1px red;
 direction: ltr;
}
div#left{ /* 子要素その2 */
 float:right;
 border:solid 1px blue;
 direction: ltr;
}

…としてやれば（親要素の書字方向を 右→左 にしてやれば）、子要素は狙ったとおりに横並びになってくれますよ、という方法を提案したのです。実例はコチラでどうぞ。

で、これがIE9 βの不具合なのか、それともこれが正しいCSSの処理方法なのか…ということは置いといて（現実問題としてIE9 β以外のブラウザでは、IE8も含めてこんな表示にはならないので、是非ともfixして欲しいのですが）、このIE9 βのレイアウトのクセを確かめるために、もうひとパターンテストしてみます。

スタイルシートは
div#container{ /* 親要素 */
 float:left;
 direction: rtl;
}
div#right{ /* 子要素その1 */
 float: left;
 border:solid 1px red;
 direction: ltr;
}
div#left{ /* 子要素その2 */
 float: left;
 border:solid 1px blue;
 direction: ltr;
}

で、htmlが
<div id="container">
 <div id="left">
  〜 なかみ 〜
 </div>
 <div id="right">
  〜 なかみ 〜
 </div>
</div>

　　→ 実例はコチラ。

思ったとおり、IE9 βで見たときだけ、ふたつのボックスが横並びにならずに縦に積まれてしまいます。

ということで結論。

IE9 βでは、
  • float: left; または float: right; を指定した親要素の中で、
  • float: left; または float: right; を使って複数の子要素を横に並べようとする場合、
  • 親要素の書字方向( direction: rtl; または ltr; )と、子要素に指定する float ( left または right )の方向が一致していないと正しくレイアウトされない。

…という。
やっぱ不具合っぽいですなぁ。

カテゴリ:

タグ: