- ベストアンサー
DOCTYPE宣言によりmarginがきかない
- DOCTYPE宣言を追加すると、divタグのマージンが正常に働かなくなる現象が発生します。
- IE８でDOCTYPE宣言を追加すると、左側のマージンは適用されるが、右側のマージンは端までいってしまいます。
- 標準準拠モードで正しくマージンを取る方法については、具体的な解決策は見つかっていません。
- kamakuragengorou
- お礼率53% (132/248)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
DTD宣言の有無で標準準拠モードと互換モードに切り替わりますがこの時、CSSの解釈が変わってしまいます。 widthとpaddingを指定した場合、標準準拠モードでは余白分ボックスの幅を拡張しますが、互換モードではボックスの幅はそのままで内側に余白を取ります。 これはheightでも同じですね。 なのでwidth(もしくはheight)とその方向に対応するpaddingを一緒に指定しないようにします。 今回の場合はwidthとpaddingを一緒に指定されていましたが、widthの値が100%でした。 ですが、これはブロックボックスであれば何も指定しない状態(width:auto;の時)でも同じ効果が得られます。 なのでwidthの指定を消すことでデザインはそのままで、解釈の違いも出なくなったと。 オススメのページです。 http://adp.daa.jp/web.html
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
widthとmarginは、ウェブ標準ブラウザでは衝突します。 width:auto; margin:10px 20px; とするとよいでしょう。 widthは、そのブロック要素のサイズを規定しますから、100%と言った時点でウィンドウの描画領域に固定されます。 ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) ＞ではどうすれば標準準拠モードで正しくマージンを取ることができるのか、 ではなくて、その挙動(width幅がウィンドウサイズになる)が正しいのですね。 <div style="width:auto; padding:5px; margin:10px 20px; border:solid 2px black;">
- metametamu
- ベストアンサー率51% (153/295)
回答しきれていませんでしたね。 ＞IE８ではwidthを指定しているとレイアウトがおかしくなって表示されますが、IE６でも試していまして、IE６ではDOCTYPE宣言、widthの指定を入れていても、レイアウトは正しく表示されています。 xhtmlでマークアップされていませんか？ IE6では一行目にDTD宣言が来ないと強制的に互換モードになります。 xhtmlで一行目にxml宣言がある場合、IE6では互換モードになりIE7以降では正しく解釈されるため標準準拠モードになります。
- metametamu
- ベストアンサー率51% (153/295)
marginというかpaddingの方が問題ですね。 widthの指定を消すと、レイアウトはそのままで問題なく表示されるはずです。
お礼
返答ありがとうございます。 確かにwidthの指定を消すと問題なく表示されました。これは気づきませんでした。ありがとうございます。しかしなぜこのような現象が起きてしまうのでしょうか。 IE８ではwidthを指定しているとレイアウトがおかしくなって表示されますが、IE６でも試していまして、IE６ではDOCTYPE宣言、widthの指定を入れていても、レイアウトは正しく表示されています。 これはなぜなのでしょうか。あるいはこういったことを説明しているサイト等あれば教えて頂けると嬉しいのですが。。。 宜しくお願いいたします。
補足
すみません。もう一点教えていただけないでしょうか。 ＞marginというかpaddingの方が問題ですね これはどのような点においてpaddingが問題だとおっしゃっているのでしょうか。 宜しくお願いいたします。