- ベストアンサー
HTMLの要素の間が空いてしまうのはなぜ？？
HTMLの要素の間が空いてしまうことがあります。firefoxで空いてしまい、IEでは空かないのですが、なぜでしょうか？それぞれの要素のwidthやheightを指定しても解消されません。marginでマイナス設定すると逆にIEで要素が重なってしまうのです。どなたかご教示くださいお願いいたします。
- yusamanman
- お礼率31% (312/997)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
本来は同じになるべきですが、IEについては過去のIEが独自の仕様をしていた関係で、互換モードと言う過去の仕様に合わせた動作があります。 もっとも大きな原因になるのが、自身のサイズをpadding辺の内側であるべきを、borderの内側と解釈するものなどがあります。他のブラウザはウェブ標準で動作しますがIEは、きちんと指定しておかないと互換モードで起動します。 DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a ) で資料を見てください。 なお、現在では必ずHTML4.01strict/XHTML4.01strict/XHTML1.1で作成することを薦めます。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ・・・仕様書のこの項目はよく読んでおくこと。ブラウザが対処すべきことと、著者が対処すべきことが書かれています。 次期HTML5はstrictの改訂です。 作成したら Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) で間違いをチェックして、誤りがあれば訂正しておきましょう。それが原因のこともあります。(ブラウザは誤りがあっても、何とか表示しようと努力しますが、その判断結果がブラウザによって異なる場合がある) スタイルシートは W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェックできます。 そのうえで、marginやpaddingを指定すると同じに表示されるでしょう。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
テスト用 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta name="author" content="IRUKA"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> html,body{margin:0;padding:0;} h1,h2{margin:20px;background-color:fuchsia} div.header,div.section,div.footer{ border:inherit soli 1px; padding:30px; margin:10px; height:200px; } div.header{background-color:aqua;} div.section{background-color:yellow} div.footer{background-color:lime;} </style> </head> <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>見だし</h2> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> </html> 一行目の<doctype>宣言を取ってのけると、IEと標準ブラウザのデザインが変わります。付いていれば同じはず。
- osietete4
- ベストアンサー率21% (81/369)
>HTMLの要素の間が空いてしまうのはなぜ？？ ブラウザが違うから。ブラウザが代わればレイアウト(見た目)くずれてしまうのは当然。
お礼
コードまで例示いただき、とても参考になりました。ありがとうございました。