「フロートの配置がUAごとに違っていた」ではFirefoxもOperaもフロートを仕様通りに配置できていたが、次のような文書を表示させるとFirefoxにもIEと同じバグがあることが分かる。
<?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>Operaだけ表示が違うが、正しいのはOperaである。OperaはCSS2.1の仕様書の9.5 Visual formatting model - Floatsに書かれている通りに、現在の行ボックスの上辺とフロートの上辺を一致させ、現在の行ボックスでフロートボックスを生成した要素より前にある内容をフロートの右側に流し込んでいる。IEとFirefoxはフロートを現在の行ボックスの一つ下に配置しており、これは間違いである(参考：インライン要素に挟まれているフロートが下にずれて置かれる - Mozilla 5.0系 CSSバグリスト)。heightプロパティの注意点～内容がfloat要素の場合 - Web標準普及プロジェクトによると、このFirefoxのバグはかなり前(Mozillaの時代)から存在しており、Operaはバージョン6の頃から正確に配置できていたようだ。Firefoxはバージョン2.0になってもまだ修正されていない。(IEもそうだが。)文中で画像をフロートにして左右に寄せるなどはありそうなシチュエーションなので、floatプロパティを使いにくくするバグだと思った。
2008年5月19日
広告
広告