掲示板/スタイルシート質問板/過去ログ/一覧/ スタイルシートレイアウト（IEとOpera等との表示の違い）

0 名前： バタえもん ： 2006/11/18（土） 22:03 ID:rWUsndDZ: スタイルシートを学び始めて一ヶ月ほど、今まではIE6.0のみで確認していたのですが、
Opera9.02やFireFox1.5.0.7でも確認すると、ずいぶんとデザインが異なるというか、
意図しない見え方になっている事に気づきました（IEの方がバグだらけのようですが）。
http://2style.jp/doraemon2006/test/test_01.htm
http://2style.jp/doraemon2006/test/test.css

1.二つ目の表「ほにゃらら2」の外枠の色と、内部のborderの色を変えたいのですが、
　IEでは意図した見え方になっているものの、
　OperaとFireFoxでは内部のborderの色に揃ってしまっています。
　別のサイトで申し訳ないのですが、↓のサイトを参考にしたのですが、
　http://www.htmq.com/style/border-collapse.shtml
　こちらのサイトも（同じようにしたので当然ですが）
　外枠と内部のborderの色が同じになっています。
　Opera等でも外枠と内部のborderの色を違ったものにする方法は無いのでしょうか。

2.最後の「ほにゃらら～助けてドラえも～ん」のdivの部分を
　上の二つの表と横幅を揃えたかったのですが、
　OperaとFireFoxでは外枠から微妙にはみ出してしまっています。
　http://2style.jp/doraemon2006/test/html_dif.gif
　これは何が問題なのでしょうか。

質問だらけで申し訳ないのですが、どうぞよろしくお願いいたします。

1 名前： K+S ： 2006/11/18（土） 22:03 ID:nROqylMa: 実際に試していませんが。

> 1.二つ目の表「ほにゃらら2」の外枠の色と、内部のborderの色を変えたいのですが、
> 　IEでは意図した見え方になっているものの、
> 　OperaとFireFoxでは内部のborderの色に揃ってしまっています。
border-collapse:collapse が適用されているテーブルの各枠線の指定には優先度があります。
border-style プロパティで指定される値の優先度や、セル、行、行グループ、列、列グループ、表に対して優先度があります。
参照： http://www6.plala.or.jp/go_west/nextcss/ref/article/tbl_clps.htm
IEではこの辺りに不備があるので表示が異なります。

> 2.最後の「ほにゃらら～助けてドラえも～ん」のdivの部分を
> 　上の二つの表と横幅を揃えたかったのですが、
> 　OperaとFireFoxでは外枠から微妙にはみ出してしまっています。
border(width) が、0より大きい幅を持っているにもかからわず、div 要素の width プロパティ値が 100% であることが恐らく原因です。
IE6.0 では、XML宣言があるため（排他的にDTDが無視されているため） quirk モードで解釈され、width:100% に border-width が含まれ、理想的な表示を実現しています。

あくまで推測なので考察に誤りがあったら恐縮です。

2 名前： バタえもん ： 2006/11/18（土） 22:03 ID:FgmnW46X: K+Sさん、早速のレスありがとうございます。

勉強不足ゆえ、各枠線の指定に優先度があるとは知りませんでした。
なるほど、これが原因だったのですね。
非常にわかりやすいリンク先を教えていただいてありがとうございました。
そちらを参考にすればどうにかなりそうです。

二つ目はquirkモードの関係ですか、
しばらく前に後方互換うんぬんについてのサイトを見たのに
全く考え付きませんでした。

本当にありがとうございました、
原因がわかったので、自分で色々と試してみたいと思います。
もし、また煮詰まったらどうぞよろしくお願いします。