- ベストアンサー
ＩＥで表示場所がずれる問題の解決方法は？
- ＦＣ２ブログで３カラム(３段組)のレイアウトでボックスを配置したところ、ＩＥのみ表示がずれてしまいます。他のブラウザでは問題ありません。どうすれば解決できるでしょうか？
- 質問者はＦＣ２ブログで３カラム(３段組)のレイアウトにボックスを配置し、スクロールにあわせて追尾するようにしたいと考えています。しかし、ＩＥのみ表示場所がずれてしまいます。他のブラウザでは問題ありません。解決策を教えてください。
- ＦＣ２ブログで３カラム(３段組)のレイアウトにボックスを配置していると、ＩＥで表示場所がずれてしまいます。他のブラウザでは問題ありません。どのようにすれば解決できるでしょうか？
- balanbajp2
- お礼率10% (86/797)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
FC2はわかりませんが、IEと他の標準ブラウザで差が出る場合、もっとも疑わなければならないのは、IEが互換モードで動作している可能性です。 IEは、かってユーザーの取り込みと他のブラウザを排斥するために独自の仕様を取り入れていました。その後IEもウェブ標準に倣うことになりますが、かってのIEのために作られたページを表示するために「互換モード」をもっています。 そのIEを標準モードで動作させるためには、DOCTYPEを適切に記述する必要があります。 [HTML4.01strict]でしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と書くことで、Mac用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&hl=ja ) （現状ではHTML4.01strictがもっとも良いでしょう。transitinalではありません。） また、当然ですが、 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )』 もとても重要です。正しく書かれていないHTMLの場合、ブラウザは何とか表示しようと適当に補完して表示を試みます。その方法はブラウザごとに異なるため、差が出てしまいます。 スタイルシートを書き始める前に ⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) でチェックしておく癖をつけましょう。 ・<ul>内に<br>や<a>は入ることは出来ません。 <ul>内に存在しうるのは<li>のみです。 ⇒<!ELEMENT UL - - (LI)+ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL ) と書かれているのは、--(前後のタグを省略できない、(LI)がひとつ以上 と書かれています。 また<br>は通常のHTML文書には登場しません。「ひとつの段落でありながら改行する」という強制改行です。間隔を広げるために使用するものではありませんし、段落を示すものではありません。 ※先日書いたサンプルが、こちら( http://okwave.jp/qa/q8246537.html )の回答No.2にあります。 DOCTYPEを上記に変更して、HTML4.01strictに変更し そこで示した示したスタイルシートを次に書き換えてみてください。 () div.header,div.section,div.footer{ width:90%;min-width:620px;max-width:1000px; margin:0 auto; padding:5px; } div.section{position:relative;min-height:400px;} div.section div.nav,div.section div.aside{/* 子孫セレクタ */ position:absolute;top:0; width:200px;height:100%; } /*div.section div.nav{left:0;}*/ div.section div.nav{height:200px;bottom:10px;position:fixed;top:auto;} div.section div.aside{right:0;} div.section h2,div.section div.section{ margin:0 210px; } div.section div.section{ width:auto;min-width:0;min-height:200px; margin:0 210px; } /* たったこれだけ!---おまけに分かりやすく色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:silver;} div.section div.section{background-color:white} div.section div.nav{background-color:yellow;} div.section div.aside{background-color:lime;} div.footer{background-color:fuchsia;}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございます。質問後、自分でいろいろ調べ、ＣＳＳハックでIEのバージョン別に個別で指定したところ解決しました。