body 要素を 840px に設定してから、マージンを自動に設定しています。
body {
width: 840px;
margin: auto;
}
FF、safari、および chrome では、これによりすべてがサイトの本体の中央に配置されます。ただし、IE(現在IE9でテスト中)では、100%に設定されているすべてのdivが画面の幅全体に拡大されます。開発ツールでは、本体の幅は 840 と表示されていますが、残りの要素は制限されていません。
ここで何をしますか?
body 要素を 840px に設定してから、マージンを自動に設定しています。
body {
width: 840px;
margin: auto;
}
FF、safari、および chrome では、これによりすべてがサイトの本体の中央に配置されます。ただし、IE(現在IE9でテスト中)では、100%に設定されているすべてのdivが画面の幅全体に拡大されます。開発ツールでは、本体の幅は 840 と表示されていますが、残りの要素は制限されていません。
ここで何をしますか?
<!DOCTYPE HTML> のような有効な doctype を使用してください
<!DOCTYPE HTML>
<style>
body {
margin: 0 auto;
width: 1000px;
}
</style>
<body>
SALALALLA
</body>
IEはそれをサポートしていません...そのためには、IE専用のマスター「コンテナ」divを作成し、IE固有のCSSファイルを使用できます(mozillaなどは無視するため、divは現在の設計に影響しません) DIVの幅を設定し、を使用して中央に配置します
#div_id{
width:840px;
left:50%;
margin-left:-420px;
}
そのようなIEのみのCSSを含める
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="/css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="/css/ie7.css" media="all" />
<![endif]-->
制限はありますが、IEではボディ幅を設定できません。