- ベストアンサー
cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <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>
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
読んでみるといいかも
その他の回答 (2)
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/
お礼
ご回答ありがとうございます。 no.1の方の回答でわかりました。 申し訳ないのですが、ブラウザではなく、私が、間違った解釈をしていました。 ボックスの範囲を勘違いしていたみたいです。 上のジャバスクリプトも試させていただきましたが、「CSS1Compat」が返ってきたので、バグでもなんでもなかったようです。 すみません。
- abacabu
- ベストアンサー率37% (250/663)
趣味でHPを製作している者です No,1さんの回答URLへ行った所、IE６のバグの様です。 が!!operaでも同様な現象が起きていると言う事は、 少々タグの方にも問題があるのではないでしょうか？ operaは標準準拠モードでHTMLを表示するはずですので タグがしっかりと正しく記述されている場合は、 今回の件に関しては、IE6のみのバグですので タグを正しく書かれているかもチェックが必要です。 正しく書くとは、閉じるべきタグはしっかり閉じるという事です。 HTMLでは、多少記述が間違っていても表示されてしまうし、 そのちょっとした間違いが元で思っている様に表示されない物です。 後最後に１つだけ 質問者様は質問を読んでいる限り、色々なブラウザで同じ表示を 目指している様に受け止められましたので、アドバイスします。 数値はpx(ピクセル),pt(ポイント)等よりは、％(パーセント)表記を 心がけると良いでしょう。 文字、枠等全般に言えることですが、IEでもバージョンによって 同じ100pxでも画面に表示される大きさが違います。 それを解決する方法が％です。 pxのかわりに％を入れると、ほぼ全てのブラウザで、 貴方が作った通りに表示される様になります。 例：width=100% この場合表示がパソコン画面いっぱいという事です。 慣れるまでの微調整はありますが、pxも同じ様に 調整して作成しますし、pxで思った通り作れて他のブラウザで 崩れていては悔しいですからね。 見る人の事を考えて作る場合は余計に％をお勧めします。
お礼
ご回答ありがとうございます。 申し訳ないのですが、どうやら、根本的に間違った解釈をしていました。 ボックスの範囲を勘違いしていたみたいです。 まさに、そのIE6のバグの方を正しいと思っていました。 widthの指定も教えていただいてありがとうございます。
お礼
ありがとうございます。 すごく良くわかりました。 根本的に、わたしの解釈が間違っていたようです。 まさに、このIE6の間違った解釈の方で考えてました。 字の左端から、右端までが、720pxで、そこに10pxのパディングがつくのですね。 テーブルのTDのように、widthで指定した720pxの、内側10pxから、字がはじまるものだと思ってました。