ＩＥとクロームの表示ずれ

質問

普段ＩＥを使ってＨＰを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
（レイアウトに関する部分はＣＳＳで定義しています）

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか？

回答No.3

ORUKA1951 · ベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
　DOCTYPEスイッチで、標準モードで起動するように直すこと
・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 )

　もちろん、HTMLもDOCTYPEに合わせて修正する必要があるでしょう。
　さすがにないでしょうが、可能ならHTML4.01strict,XHTML1.0strict,XHTML1.1(XHTML1.1にはtransitinalやframesetはない)・・1999年の勧告以来
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より
　とされてきましたから、strictだとは思いますが・・

　なお、互換モードで一番問題となるのは、IEのスタイルシートのサイズ計算のバグです。
すなわち、コンテナブロックのサイズをpaddin辺の内側ではなくborder辺の内側として計算してしまうことにあります。
　IEを標準にWebページを作成すると良く犯す失敗です。できれば他のウェブ標準ブラウザを使用して作成するほうが無難です。特にFirefoxは開発用ツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この様なときにとても助かります。

お礼

詳しくありがとうございました。
一生懸命修正しました。

回答No.2

kamepanman

この辺のサイトを見るとわかりやすいですよ！！
http://webdesignrecipes.com/css-visual-formating-model/
http://webdesignrecipes.com/css-blocklevel-elements/

たぶんfloatまわりで失敗しているのかとｗｗｗ
まずは、Chromeで作ってからIEに対応がセオリーですかね

お礼

ありがとうございました。
チョコチョコ修正しました。

回答No.1

kosukejlampnet

難しくはないけど、とにかくめんどくさいです。
その現象が起こる理由はボックスモデルの解釈の違いが起こるためです。

この辺は図解とかがないと説明しにくいので、「ボックスモデル　CSS」などで検索してみてください。

自分がサイトを作るときに気をつけているのは、ブロック要素はpaddingを設定せずに、marginで調整するようにしています。
そうすると余計なことを考えずに済むので。

お礼

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

微調整が必要なんですね。