ショボ短歌会

IE8でサイドバーのレイアウトが崩れる場合の対処法

解決済

  • 質問者：midorinodonchan
  • 質問日時：
  • 回答数：3件

CSSについての質問です。

IE8よりも古いバージョンでのみレイアウトが崩れて困っています。

簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。

[HTML]
----------------
<div id="main">
</div>

<div id="sidebar">
</div>

<div id="footer">
</div>
----------------

[CSS]
----------------
#main{
float:left;
width:620px;
}

#sidebar{
float:right;
width:300px;
}

#footer{
clear:both;
}
----------------

IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。

しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。

----------------
<div id="main">
<div id="sidebar">
</div>
</div>
----------------

なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。
どうにか解決する方法はありませんでしょうか？


文章だと伝わりくいかもしれませんが、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

ブラウザが互換モードで動作しているからです。


1999年のHTML4.01の勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』とされてきたのに、他の仕様で作っている、他の仕様であるにしてもブラウザが互換モードで動作するように指定しているからでしょう。
※以前の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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

非常に詳細な回答ありがとうございます。おっしゃる通り互換表示がオンになっていると表示が崩れていました。

色々と試した結果、結局divの閉じ忘れでしたが、ご回答によって非常に勉強になりました。

ありがとうございました。

通報する
お礼日時：2013/10/18 14:52

No.3

  • 回答者： taloo
  • 回答日時：

>しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。



こうなることが原因だと思いますので、その現象の直接の原因であるHTMLコードの不備を直せば、期待通り表示されるのではないでしょうか。
<div>の閉じ忘れなどのミスをチェックしてみてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

おっしゃる通り<div>の閉じ忘れでした。こんな初歩的なミスで質問してしまい申し訳ないです。

通報する
お礼日時：2013/10/18 14:53

No.1

> 文章だと伝わりくいかもしれませんが、よろしくお願いいたします


この一行入れるぐらいだったら、コピペで現象を確認できるようにソース全部貼って！
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報