MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

[解決済み]Firefox 3.0 Beta では<table>タグの表示が変です
https://forums.mozillazine.jp/viewtopic.php?f=30&t=7270		 ページ 1 ／ 1
作成者:  Atsunor [ 2008年4月09日(水) 17:44 ]
記事の件名:  [解決済み]Firefox 3.0 Beta では<table>タグの表示が変です
Firefox 3.0 Beta 4と5を Windows XP (SP2) にインストールしてHTMLファイルを
表示させたところ、<table>タグの表示が他のブラウザと違うことに気付きました。

<table>タグ内には各属性を伴いますが、以下に２つのHTMLソースを示しますので、
テキストエディタを開いてコピー＆ペースト後、拡張子を html か htm で保存して
ください。
そして、これら２つのHTMLファイルを Firefox 2.0 や Opera 、IE などで表示させて、
Firefox 3.0 Beta の場合と見比べていただき、ご意見を賜りたいと存じます。

その １

<html>
<body>
<table border="3"cellspacing="5" width="300" height="100"
style="background-color : #F0F070;" bordercolor="#B0B030"
bordercolordark="#808040" bordercolorlight="#F0F0E0">
<tr style="background-color : #F5F5F0;">
<td > </td>
</tr>
</table>
</body>
</html>


その ２

<html>
<body>
<table border="3"cellspacing="5" width="300" height="100"
style="background-color : #F0F070;" bordercolor="#F0F070"
bordercolordark="#808040" bordercolorlight="#F0F0E0">
<tr style="background-color : #F5F5F0;">
<td > </td>
</tr>
</table>
</body>
</html>

html に関する話題でしたので、「Mozilla Firefox」フォーラムから「web 標準」フォーラムに移動しました by Cai
作成者:  Cai [ 2008年4月09日(水) 18:22 ]
記事の件名:  Re: Firefox 3.0 Beta では<table>タグの表示が変です
Atsunor さんが書きました:
Firefox 3.0 Beta 4と5を Windows XP (SP2) にインストールしてHTMLファイルを
表示させたところ、<table>タグの表示が他のブラウザと違うことに気付きました。

<table>タグ内には各属性を伴いますが、以下に２つのHTMLソースを示しますので、
テキストエディタを開いてコピー＆ペースト後、拡張子を html か htm で保存して
ください。
そして、これら２つのHTMLファイルを Firefox 2.0 や Opera 、IE などで表示させて、
Firefox 3.0 Beta の場合と見比べていただき、ご意見を賜りたいと存じます。

bordercolordark/bordercolorlight と bordercolor を同時に指定しているためではないでしょうか？
bordercolor は上下左右すべての border の色を、bordercolordark は右と下、bordercolorlight は上と左の border の色を指定するものですから、同時に指定できません。
Firefox 3 では bordercolor が、IE では bordercolordark/bordercolorlight が優先されることを確認しました。Firefox 2 で確認できる環境にないので、2→3 で変更があったのかはわかりません。
bordercolor を外してやると同じように表示されます。

# 個人的には CSS で border-color : #F0F0E0 #808040 #808040 #F0F0E0; と指定してやることをおすすめします。
作成者:  Kuro [ 2008年4月09日(水) 23:01 ]
記事の件名:  Re: Firefox 3.0 Beta では<table>タグの表示が変です
こんばんは、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 で描画してみると、大体同じ描画になりました。

独自拡張ばかり含まれているので、なるべく最近のブラウザで大体同じように表示させたいなら、独自拡張は使うべきではないと思います。
作成者:  Atsunor [ 2008年4月10日(木) 21:46 ]
記事の件名:  Re: Firefox 3.0 Beta では<table>タグの表示が変です
Cai さん、ありがとうございました。

> bordercolordark/bordercolorlight と bordercolor を同時に指定しているためではないでしょうか？
> bordercolor は上下左右すべての border の色を、bordercolordark は右と下、bordercolorlight は
> 上と左の border の色を指定するものですから、同時に指定できません。

確かにそうですね。bordercolor は枠線全ての色を指定するものですし、bordercolordark と
bordercolorlight も、それぞれの場所の枠線の色を指定するものですから、これらを同時に
指定することは間違っていますね。
しかし、記述しましたソースの状態では、Firefox 2 に於いては bordercolor の指定で
bordercolordark と bordercolorlight の表示を変えることができるのです。


Kuro さん、ありがとうございました。

DOCTYPE 宣言によって表示方法を設定させることを再認識させられました。
素人の私は Transitional DTD で URL あり、とすることが多いのですが、記述したソースが
宣言に従っているのかと、悩むことも多いです。
作成者:  Kuro [ 2008年4月10日(木) 22:24 ]
記事の件名:  Re: Firefox 3.0 Beta では<table>タグの表示が変です
後々調べていたら、これまたもじら組のWeb標準化プロジェクトにドキュメントがありました。

テーブルの枠線に正しく色を付ける
http://www.mozilla.gr.jp/standards/webtips0011.html

かなり遠回りの解決になってしまいすみませんでした。
ただ、昨今は XHTML によるウェブ標準をベースとするウェブサイト作成に傾いているので、マークアップに「見た目に関する情報」を含ませるのはいかがなものかと伝えたかったのです。
出来る限りスタイルシートで見た目を表現しておけば、将来必ず「幸せになれるとき」が訪れると確信しています。
作成者:  Hide [ 2008年4月11日(金) 02:53 ]
記事の件名:  Re: Firefox 3.0 Beta では<table>タグの表示が変です
Atsunor さんが書きました:
しかし、記述しましたソースの状態では、Firefox 2 に於いては bordercolor の指定で
bordercolordark と bordercolorlight の表示を変えることができるのです。
変えることができたのではなく、変わってしまったんでしょうね。
Atsunor さんのオリジナルでは記述に間違いがあるので、次のように修正すると Firefox 3 Beta, Firefox 2.x, Safari 3.1 でもだいたい同じような結果となります。
コード:
<table border="3"cellspacing="5" width="300" height="100"
style="background-color : #F0F070; bordercolor: #B0B030
bordercolordark: #808040; bordercolorlight: #F0F0E0">
<caption>クオート修正</caption>
<tr style="background-color : #F5F5F0;">
<td>Hello!</td>
</tr>
</table>

しかし、上は標準的な記述というわけではないので、オリジナルと同様な結果を期待して正しく記述したいのであれば、Kuro さんのコードのようにするべきです。
さらにさらに、HTML 4.01 Transitional でも CSS は外部ファイルとすることをお勧めします。

Atsunor さんが書きました:
素人の私は Transitional DTD で URL あり、とすることが多いのですが、記述したソースが
宣言に従っているのかと、悩むことも多いです。

ご自分の HTML が標準的なマークアップであるかを確認するのでしたら W3C Markup Validation Service を利用されると良いですよ。
CSS は W3C CSS Validation Service で検証できます。
上記２つのサービスを利用して、検証結果に警告や注意が出るようなら、何についての警告や注意なのかを勉強されると HTML の理解が深まると思います。
＃完全に合わせなくてはいけないということではないので。

HTML についての基礎を確認してみたいのであれば、神崎正英氏の The Web KANZAKI 内、ごく簡単なHTMLの説明は大変参考になると思います。
How to サイトのような派手なものはありませんが、基礎を身に付けるための重要なことが書かれていますので。
作成者:  Atsunor [ 2008年4月11日(金) 21:40 ]
記事の件名:  Re: Firefox 3.0 Beta では<table>タグの表示が変です
Kuro さん、再度のご指導ありがとうございました。
Kuro さんが書きました:
後々調べていたら、これまたもじら組のWeb標準化プロジェクトにドキュメントがありました。

テーブルの枠線に正しく色を付ける
http://www.mozilla.gr.jp/standards/webtips0011.html

このような方法が、あったのですね。 大変参考になりました。
解決に向けての、お骨折りに感謝申し上げます。


PH2@Hide さん、ありがとうございました。

お教えいただいた各Webサイトは、今後に何かと参考にさせていただきます。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/