CSS2.1の解説を書いていて気がついたのだが、フロートの配置がUAごとに違っている。次のXHTML文書を作成し、Internet Explorer 7、Firefox 2.0、Opera 9.10でそれぞれ表示させてみた。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>サンプル文書</title>
<style type="text/css">
* { margin: 0; padding : 0 }
p {
width: 20em;
border: 1px solid gray;
font: 16px/1 monospace;
letter-spacing: 0
}
span {
float: left;
width: 10em;
border: 1px solid blue
}
body {
margin: 20px;
background: white
}
</style>
</head>
<body>
<p>
１２３４５６７８９０１２３４５６７８９０１２３４５
<span>ここがフロート</span>
ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹ
</p>
</body>
</html>すると、このような結果になった。
IEは「ＡＢＣＤ…」の次の行ボックスの上辺にフロートの上辺を合わせている。Firefoxはフロートの前後に改行が入った感じになり、「１２３４…」「ＡＢＣＤ…」の行が包含ブロックを突き抜けている。Operaは「ＡＢＣＤ…」の行ボックスの上辺にフロートの上辺を合わせている。
三者三様である。どれが正しいのか。CSS2.1の仕様書には次のように書かれている。
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box.
If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.
また、厳密な規則は次のようである。
- The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
- If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
- The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.
- A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
- The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
- The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
- A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
- A floating box must be placed as high as possible.
- A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
フロートは外辺が包含ブロックの外辺に接するまで左(もしくは右)に移動し、行ボックスがあるなら現在の行ボックスの上辺にフロートを揃える、現在の行ボックス上でフロートの前にある内容はフロートの反対側に流し込む、フロートを配置するスペースが水平方向に足りないのであれば下に押し下げる、とされている。「現在の行ボックス」をどう解釈するかで表示が異なっているようだ。現在の行ボックスとはフロートが移動する前に位置していた行のことだろう。と言うことは、たぶんOperaが正しい。IEは現在の行ボックスの次の行にフロートを揃えている。Firefoxは謎である。
いまいち自信がないので分かる人がいたら教えてほしい。
追記。Firefoxは全角英数字を半角英数字と同じように扱っているため、内容が包含ブロックの右側を飛び出しているようだ(参照：Firefoxは全角英数字を半角英数字と同じように扱う)。そのためFirefoxは横に収まりきらないフロートを下に押し下げている。これは仕様通りであり、上記の検証結果はOperaとFirefoxが正しいことになる。しかし、Firefoxにはインライン要素に挟まれたフロートを下に配置するバグが存在する(参照：フロートを正しく配置できるのはOpera)
2008年5月19日
広告
広告