こんばんは、Atsunor さん。
Atsunor さんが書きました:
Firefox 3.0 Beta 4と5を Windows XP (SP2) にインストールしてHTMLファイルを
表示させたところ、<table>タグの表示が他のブラウザと違うことに気付きました。
私が理解できていないのもしれませんが、ブラウザごとの表示が違うのであれば、マークアップ例は2つ必要ないでは？
例1と例2は table 要素の bordercolor 属性の指定が異なるだけで他は全く同じです。
原因を特定するため、マークアップを極力シンプルにしてみましょう。
まず、bordercolorlight 属性と bordercolordark 属性。
どの属性も IE 独自拡張です。Firefox は解釈できないので無視されます。これらを属性から取り除きます。
bordercolor 属性は IE が優先的にサポートしていて Firefox で解釈は一応できるものの、不完全な描画でしかないので推奨しません。スタイルシートで代替できるので、使わない方がよいでしょう。
次に、DOCTYPE モード。示されたマークアップだと、後方互換モードで動作するので、モダンなブラウザであっても、個々に描画が異なります。モダンなブラウザで描画を極力同じにしたいなら、標準モードで動作するようにします。
Mozillaには複数のレンダリングモードがあります（Web標準普及プロジェクト）
http://www.mozilla.gr.jp/standards/webtips0014.html
で、いろいろ直したコードはこちら。
#DOCTYPE は、HTML 4.01 Strict としています。
#色の指定を分かりやすいものにしています。
#ページタイトルは超適当です(汗)。
コード:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=shift_jis">
<title>Difficult table rendering on Fx2 and Fx3</title>
</head>
<body>
<table border="3" cellspacing="5" width="300" style="background-color : #F0F070;">
<tr style="background-color : #F5F5F0;">
<td >This is sample text.</td>
</tr>
</table>
</body>
</html>
このコードを、Firefox 2.0.0.13 と Firefox 3 Beta 5 と Internet Explorer 6.0 と Opera 9.27 で描画してみると、大体同じ描画になりました。
独自拡張ばかり含まれているので、なるべく最近のブラウザで大体同じように表示させたいなら、独自拡張は使うべきではないと思います。
ログイン
ユーザー登録
FAQ
検索
