「Firefox 3、Opera 9.5で実はココが困った！」を聞いた

次世代ブラウザ、Web制作者の苦悩

CSSの解釈がより厳密になった次世代ブラウザ

■特定条件下におけるテーブルの幅をめぐる解釈の違い

　言葉は悪いが、HTMLやCSSの記述がある程度いいかげんであいまいであっても、よしなに解釈して処理してくれる――。それがこれまでのブラウザだったとすると、ここ最近リリースされている新しいブラウザでは、記述内容をより厳密に、正確に解釈して表示する傾向が強まっている。

　たとえば、Aさんが実際に遭遇したのが下の画面のような現象。いずれも同じ(X)HTMLファイルを表示されたものだが、Firefoxであっても2と3では大きく違っている。簡単にいえば、ある特定のスタイルの条件が重なった場合に、テーブルの幅の解釈がブラウザによってまちまちになってしまったケースだ。Web制作者の方は下のサンプルコードも併せてご覧いただくと手っ取り早く理解いただけると思う。

テーブルの幅の違いに注目してほしい。右の2つ（Firefox 3とOpera 9.5）が正しい表示

<div style="position:relative;width:100%;height:200px;background-color:#CCC;margin-bottom:3em;border:1px #000 solid;">
<p>このdivボックスには幅100%が指定されています。</p>
<div style="position:absolute;background-color:#eee;border:1px #000 solid;">
<p>このdivボックスには幅が指定されていません。絶対配置が指定されています。</p>
<table style="width:100%;background-color:#000;color:#fff;" border="1">
<tr>
<td>
<p>このテーブルには幅100%が指定されています</p>
</td>
</tr>
</table>
</div>
</div>
<div style="position:relative;width:100%;height:200px;background-color:#CCC;border:1px #000 solid;">
<p>このdivボックスには幅100%が指定されています。</p>
<div style="position:absolute;background-color:#EEE;border:1px #000 solid;">
<p>このdivボックスには幅が指定されていません。絶対配置が指定されています。</p>
<div style="background-color:#000;color:#FFF;width:100%;border:1px #000 solid;"><p>このdivボックスには幅100%が指定されています。</p>
</div>
</div>
</div>

　このケースでは本来、Firefox 3やOpera 9.5の表示が正しいはずなのだが、厄介なのはInternet Explorer（IE）だけでなく、Firefox 2まで誤った解釈をしていたということだ。そのため、以前は“誤った記述”によって問題なく表示されていた（と思っていた）ものが、最新ブラウザの“正しい解釈”によって逆に崩れてしまうという事態を招く恐れがある。

■％指定でのフォントサイズの違いが解消されたOpera

同じHTMLを表示した画面の一部を4つのブラウザで比較。Opera 8.5はフォントサイズが一回り小さい

　Operaではある特定の条件の場合に、テキストが他のブラウザとは異なるフォントサイズで表示されてしまう現象があった。右に示したのが実際の表示を比較したものだが、Opera 8.5だけ、明らかに一回り小さなサイズになっているのがお分かりいただけるはずだ。

　この問題は、最新のOpera 9.5では解消され、他のブラウザと同様の表示結果を得られるようになっている。これまで何らかの方法でこの問題を回避していたのであれば、逆にOpera 9.5で問題なく表示できているかどうか、確認したほうがよいかもしれない。

　フォントサイズの表示に違いが発生していたのは、以下のような指定をしていた場合。親要素のテキストサイズをpxで指定し、その下の子要素を100％以下の％単位で指定した際に不都合が生じていた。

CSS

body { font-size:13px; }
p,ul,ol,li{ font-size:95%; }

HTML

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<ul>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ul>
<ol>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ol>