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;
}
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;
}
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>
<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 )の方向が一致していないと正しくレイアウトされない。
…という。
やっぱ不具合っぽいですなぁ。
コメント