みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssで<div>にpaddingを指定したとき

下のように、cssで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、
IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。
divの下に740pxのテーブルをおいて確認してみました。
これは、こういうものと、思うしかないのでしょうか?
また、こうなるのは、私だけなのでしょうか?

<style type="text/css">
<!--

#contents {
width: 720px;
padding: 10px;
background-color: #00FFFF;
}

-->
</style>
</head>

<body>

<div id="contents">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</div>
<table width="740" border="0">
<tr>
<td bgcolor="#0000FF">あ</td>
</tr>
</table>

</body>

投稿日時 - 2006-12-17 03:45:43

QNo.2606973

困ってます

質問者が選んだベストアンサー

読んでみるといいかも

参考URL:http://adp.daa.jp/archives/000265.html

投稿日時 - 2006-12-17 04:43:52

お礼

ありがとうございます。
すごく良くわかりました。
根本的に、わたしの解釈が間違っていたようです。
まさに、このIE6の間違った解釈の方で考えてました。
字の左端から、右端までが、720pxで、そこに10pxのパディングがつくのですね。
テーブルのTDのように、widthで指定した720pxの、内側10pxから、字がはじまるものだと思ってました。

投稿日時 - 2006-12-18 03:05:30

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

CSSの解釈に”W3C勧告に近い解釈をするモード”と”マイクロソフト独自の解釈をするモード”があると考えると簡単かも知れません。
W3C勧告邦訳
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

それをDOCTYPE宣言で切りかえることができるようになっているのが最近のブラウザです。
このモードの確認方法としてjavascriptの”document.compatMode”があると考えられたら如何でしょうか。
これはFirefox1.5もサポートしていたと思いました。

例えば、HTML文書中に
<script>
alert(document.compatMode)
</script>
こんなものを仕込んで”CSS1Compat”が返ってくるなら「W3C勧告に近い解釈をするモード」なんで、最近のブラウザ同士で表示の違いを探すとあまり見つからないのですが、もし”BackCompat”を返すようなら「マイクロソフト独自の解釈をするモード」なのでFirefoxと比較すると違う部分が多く見られてしまうのです。
Firefoxは常に「W3C勧告に近い解釈をするモード」しか持たないとおもいました。

ところがIE6やOperaは2つのモードを持つブラウザだと思います。
Operaでは、”CompatMode Override”によりDOCTYPE宣言に関わらず作成者がモードの切り替えを自由にできるのですが、IE6ではこれはサポートされておらずDOCTYPE宣言に依存しているのではないかと記憶しております。

記憶違いがあるかもしれませんので、詳細はここを読んでみていろいろ試してみてください。
http://jp.opera.com/docs/specs/opera9/doctype/

投稿日時 - 2006-12-17 11:17:02

お礼

ご回答ありがとうございます。
no.1の方の回答でわかりました。
申し訳ないのですが、ブラウザではなく、私が、間違った解釈をしていました。
ボックスの範囲を勘違いしていたみたいです。

上のジャバスクリプトも試させていただきましたが、「CSS1Compat」が返ってきたので、バグでもなんでもなかったようです。
すみません。

投稿日時 - 2006-12-18 03:21:11

ANo.2

趣味でHPを製作している者です
No,1さんの回答URLへ行った所、IE6のバグの様です。
が!!operaでも同様な現象が起きていると言う事は、
少々タグの方にも問題があるのではないでしょうか?
operaは標準準拠モードでHTMLを表示するはずですので
タグがしっかりと正しく記述されている場合は、
今回の件に関しては、IE6のみのバグですので
タグを正しく書かれているかもチェックが必要です。
正しく書くとは、閉じるべきタグはしっかり閉じるという事です。
HTMLでは、多少記述が間違っていても表示されてしまうし、
そのちょっとした間違いが元で思っている様に表示されない物です。
後最後に1つだけ
質問者様は質問を読んでいる限り、色々なブラウザで同じ表示を
目指している様に受け止められましたので、アドバイスします。
数値はpx(ピクセル),pt(ポイント)等よりは、%(パーセント)表記を
心がけると良いでしょう。
文字、枠等全般に言えることですが、IEでもバージョンによって
同じ100pxでも画面に表示される大きさが違います。
それを解決する方法が%です。
pxのかわりに%を入れると、ほぼ全てのブラウザで、
貴方が作った通りに表示される様になります。
例:width=100% この場合表示がパソコン画面いっぱいという事です。
慣れるまでの微調整はありますが、pxも同じ様に
調整して作成しますし、pxで思った通り作れて他のブラウザで
崩れていては悔しいですからね。
見る人の事を考えて作る場合は余計に%をお勧めします。

投稿日時 - 2006-12-17 10:15:13

お礼

ご回答ありがとうございます。
申し訳ないのですが、どうやら、根本的に間違った解釈をしていました。
ボックスの範囲を勘違いしていたみたいです。
まさに、そのIE6のバグの方を正しいと思っていました。

widthの指定も教えていただいてありがとうございます。

投稿日時 - 2006-12-18 03:12:23

あなたにオススメの質問