- ベストアンサー
IE8でサイドバーのレイアウトが崩れる場合の対処法
- IE8よりも古いバージョンでのみレイアウトが崩れて困っています。
- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。
- 全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。どうにか解決する方法はありませんでしょうか？
- midorinodonchan
- お礼率97% (101/104)
- CSS
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ブラウザが互換モードで動作しているからです。 1999年のHTML4.01の勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』とされてきたのに、他の仕様で作っている、他の仕様であるにしてもブラウザが互換モードで動作するように指定しているからでしょう。 ※以前のIEは、他のブラウザとの差別化、ユーザーの囲い込み、他のブラウザを排除するために独自の解釈をしていました。そのためにIEでしか見れないウェブサイトをたくさん作ってしまいました。 ところが、世の中Windowsばかりじゃない・・・。そのため世の中がウェブ標準になっても他の世界と解離していった。 そのために、IEにはウェブ標準モードと、IEの過去の仕様にあわせた互換モードが存在します。標準モードで動作させるためにはDOCTYPE宣言を HTML4.01strictの場合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML4.01transitinalの場合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と書かないとなりません。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) ※そのようなidの使い方は、とてもたくさん見かけますがまずいです。sidebarじゃ何が書かれているか分からないし、将来下に回そうとした時に困るでしょう。しかもidじゃ一箇所しか使えない!!。headerもsidebarもfooterもひとつのHTML内に何度も登場する可能性がある。リンクターゲットやjavasciptのターゲットなどにidを使いましょう。またその名称も後から内容が分かるように・・ ※floatはこの様な場合使用しません。フォントサイズが変わったりすると崩れたり、そして何よりも本文中でfloatが自在に使えなくなります。また、floatさせるために文書の順番を変えるなど文書構造が制約を受けます。 ※サンプルは、リキッドです。480px～920px程度まで伸縮しても崩れない ※IE6以降は中央配置IE5,IE5.5では左による。 ※IE7以前は、min-height,height:100%に対応していないが崩れることはない ※firefox,Opera,Chrome,Safari,IE--Linux版も--で標準で表示される。 ★Another HTML Lint HTML5 - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) でチェック済み ★タブは＿に置換してあるので戻すこと。 [サンプル] <!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>IE8でサイドバーのレイアウトが崩れる場合の対処法 </title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- p{line-height:1.6em;text-indent:1em;margin:0;} div.header,div.section,div.footer{ width:90%;min-width:470px;max-width:900px; margin:0 auto; padding:5px; } div.section{ position:relative; min-height:200px; } div.section h2,div.section p,div.section div.section{ margin:0 31% 0 0; width:auto; } div.section div.aside{ width:30%;height:100%; position:absolute; top:0;right:0; } /* 参考のため色づけ */ body{background-color:gray;} div.header{background-color:yellow;} div.section{background-color:silver;} div.footer{background-color:lime;} div.aside{background-color:aqua;} div.section div.section{background-color:white;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>IE8でサイドバーのレイアウトが崩れる場合の対処法 </h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>章見出し</h2> ＿＿<p>class名は、HTML5の新しい要素名を参考にしてある。</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>記事だよ</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>本文と関係ない記事</h3> ＿＿＿<p>と言う意味でasideとclass名をつけてある。</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 こうなることが原因だと思いますので、その現象の直接の原因であるHTMLコードの不備を直せば、期待通り表示されるのではないでしょうか。 <div>の閉じ忘れなどのミスをチェックしてみてください。
お礼
回答ありがとうございます。 おっしゃる通り<div>の閉じ忘れでした。こんな初歩的なミスで質問してしまい申し訳ないです。
- kosukejlampnet
- ベストアンサー率44% (126/282)
> 文章だと伝わりくいかもしれませんが、よろしくお願いいたします この一行入れるぐらいだったら、コピペで現象を確認できるようにソース全部貼って！
お礼
非常に詳細な回答ありがとうございます。おっしゃる通り互換表示がオンになっていると表示が崩れていました。 色々と試した結果、結局divの閉じ忘れでしたが、ご回答によって非常に勉強になりました。 ありがとうございました。