掲示板/スタイルシート質問板/過去ログ/一覧/ IE と Opera，解釈が正しいのはどっち？

0 名前： JJon.com ： 2006/01/27 13:13: 下記のソースは，
『スタイルシートスタンダード・デザインガイド』
http://book.mycom.co.jp/book/4-8399-1501-6/4-8399-1501-6.shtml
のサイトからダウンロードできるサンプルファイルの chapter07\sample01
から，相違が再現できる最小限のエッセンスだけを抜き出したものです。

▼index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<table border><tr>
<td class="contents">
<div class="section">
<p>エコロジーエコロジーエコロジーエコロジーエコロジー</p>
</div>
</td></tr></table>
</body></html>

▼design.css
* {margin:0; padding:0; }
body {text-align:center; }
table {width:50%; }
.contents {text-align:left; }
.section {width:200px; }

IE6.0では，
横幅50%のテーブルがブラウザ画面上に中央揃えで表示され，
横幅200pxの文字列がテーブル内に左寄せで表示されました。

Opera8.5では，
横幅50%のテーブルがブラウザ画面上に左寄せで表示され，
横幅200pxの文字列がテーブル内に中央揃えで表示されました。

最終的に得たい結果は「IE6.0での表示画面と同じもの」で
冒頭の参考書でも上記のソースを解答例として提示しているのですが，
「Operaの方がCSSの解釈がより正しい」というような噂を耳にしたこともあり，
もしかしてOperaの表示の方が適切なのかなあ，と訝しく思っています。

<table>や<div>の包含って上記ソースのような書き方で正しいのでしょうか？
もし Operaの解釈の方が適切なのであれば，
Operaで「IE6.0での表示画面と同じもの」を結果表示するには
上記ソースをどのように修正すればよいのでしょう？
どなたかアドバイスをいただけませんか。

1 名前： Z ： 2006/01/27 13:13: 　IEは俗に言う「DOCTYPEスイッチ」というものをもっていて、DTDのURLがある場合とない場合でレンダリングが変わってきます。
「DOCTYPE ブラウザモード」で検索したところ、下記資料が参考になりそうです。

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html
http://www.redout.net/data/dtdmode.html
http://www.ichiro.to/note/doctypeswitch

　その他、下記資料などが参考になるかと思います。

http://members.jcom.home.ne.jp/pctips/www/DOCTYPE.html
http://www.kanzaki.com/docs/html/doctype.html
http://htmllint.itc.keio.ac.jp/htmllint/explain.html#unknown-doctype

2 名前： S ： 2006/01/27 13:13: 　そもそも>>0はHTML4.01Strictを名乗るにはいまいちなソース。文法チェッカでチェックして見直すことをおすすめ。

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

　間違ったDOCTYPEは、下手するとブラウザを異常終了させる（「不正なHTML」とみなされるため）ので、自信がないならTransitionalにしたほうがいい。もちろん「構造（HTML)と見栄え（CSS)の分離」という意味ではStrictのほうが良いわけだが。

http://members.jcom.home.ne.jp/pctips/www/knowledge/Web.html

3 名前： Pid ： 2006/01/27 13:13: >>0
結論だけ言えば Opera の表示が「正しい」です。理由は下記参照。

http://www.mozilla.gr.jp/standards/webtips0004.html
http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html

そもそも，table 要素を使う意味が無いように思います。

4 名前： JJon.com ： 2006/01/27 13:13: Pid さん。
的確な解答ありがとうございます，うれしいです(^^)

といいつつ。
Operaで <table> が正しく左寄せされる理由は納得できたのですが，
セル内の文字列がなぜ中央揃えになるのかまだ理解していないです。
結果から判断するに「<td> に対する text-align:left; は効かない」
ということになるのでしょうが……そういうものなのですか？
分かる方いらっしゃいましたらアドバイスいただきたいです。

「そもそも table 要素を使う意味が無い」ソースになっているのは，
バグが再現できる最小限のエッセンスだけ抜き出したものだからです。
書籍掲載のサンプルファイルでは，
表組みを使う意味があるので<table>を用いています，大丈夫です。

回答を考えていただける方に余分な手間をかけることのないよう，
この問題の本質ではない記述や属性は，私の方で切り捨ててあります。

5 名前： Pid ： 2006/01/27 13:13: > <td> に対する text-align:left; は効かない

すみません，この指定を見落としていました。これに関しては Opera のバグのような気がします（今 Opera が手元に無いので確認していません）。

なお，この件に関しては >>1 で触れられている DOCTYPE スイッチも大いに関係あります（特に WinIE6）ので，お調べ下さい。

> 表組みを使う意味があるので

ぶっちゃけ，「WinIE で縦方向の中央寄せをしたい」という理由以外に，いまどきテーブルレイアウトを採用する意味があるでしょうか。いやまあ，私がテーブルレイアウト嫌いというだけの話なのですが（レイアウトのためだけの table 要素は，スタイル的にもスクリプト的にも極めてコントロールしづらいので (^^;)）。

すみません，話の脱線でした。

6 名前： Pid ： 2006/01/27 13:13: >>6
> これに関しては Opera のバグのような気がします

ごめんなさい，嘘つきました。

Opera の場合，text-align が tr 要素に継承され，td 要素を中央寄せしているようです。td 要素はブロック要素ではないので，これはこれで正しい解釈だと思います。

7 名前： カヅサツ ： 2006/01/27 13:13: これが「正しい」記述だと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
table,td{
border-width: 1px;
border-style: solid;
}
table{
margin: 0px auto;
width:50%;
}
.section{
width: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<table><tr>
<td class="contents">
<div class="section">
<p>エコロジーエコロジーエコロジーエコロジーエコロジー</p>
</div>
</td></tr></table>
</body>
</html>