IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・

Question

XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。
一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。

センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。
ためしに、headとnavだけのスリムな状態にしても同じでした。。。
解決方法に心当たりのある方はお願いします。
【CSS】
@charset "shift_jis";
* {
line-height: 150%;
font-size: 12px;
letter-spacing: 1px;
}

body{
margin:0px;
padding:0px;
text-align:center;
background-repeat: no-repeat;
}
img {
border: none;
vertical-align: bottom;
}
h1 {
font-weight: normal;
margin: 15px 0 0 50px;
}
#head{
width:900px;
height:69px;
background-image: url(img/bg-head.jpg);
margin: 0px auto;
text-align: left;
}
#nav {
width: 100%;
background-image: url(img/bg-nav.jpg);
}
#nav ul {
margin: 0px auto;
width: 900px;
padding: 0px;
list-style: none;
height: 31px;
}
#nav li {
float: left;
}
#main {
width: 100%;
height: 284px;
text-align: center;
background-image: url(img/bg-main.jpg);
}

#wrap{
width:880px;
margin:0px auto;
text-align:left;
padding: 0 10px 0 30px;
background-image: url(img/bg-wrap.jpg);
background-repeat: repeat-y;
}

#left{
width:645px;
float:left;
}
#right{
width:220px;
float:right;
text-align: right;
padding: 0px;
height: 1200px;
background-image: url(img/bg-right.gif);
}

#foot{
position:relative;
width:100%;
height:35px;
clear:both;
background-image: url(img/bg-foot.gif);
margin: 0 0 50px 0;
}

【html】
<body>

<div id="head">
<h1>\\\\\\\\\\\\\\\\\\</h1>
</div>


<div id="nav">
<ul>
<li><img src="img/nav_01.jpg" /></li>
<li><img src="img/nav_02.jpg" /></li>
<li><img src="img/nav_03.jpg" /></li>
<li><img src="img/nav_04.jpg" /></li>
<li><img src="img/nav_05.jpg" /></li>
<li><img src="img/nav_06.jpg" /></li>
<li><img src="img/nav_07.jpg" /></li>
</ul>
</div>

<div id="main"><img src="img/main.jpg" /></div>
<div id="wrap">


<div id="left">
</div>


<div id="right">

</div>
<br style="clear:both" />

</div>

<div id="foot">
</div>

</body>

\\\\\\\\\

grumpy_the_dwarf · Accepted Answer

普通のブラウザはスクロールバーを「描画領域」とはみなしません。
スクロールバーを除いた幅を100%としてモノを配置します。が、IEは
スクロールバー込みで描画領域の幅を考えます。だから、ずれて見え
るんです。

バラバラな幅の積み木を重ねたようなデザインだと目立つので、全体
をキチっとラップして幅を指定してやるのがいいんじゃないですか。

key-child · Answer

> よくわからないのが、なぜ一部分だけがずれているのか・・・

> headとnavだけ残しても右寄りになっちゃうんですよね。

おそらくul要素の外左余白がうまく消えていないため。
ul要素の幅を100%にするとわかりやすい。


後方互換となっていると、いろいろ面倒なので、標準準拠となるように文書型宣言を変更することを勧める。

World Wide Web Guide　!DOCTYPE スイッチ
http://w3g.jp/others/data/doctype_switching

outbrave · Answer

width:100%; を削除してみてください。

font_color · Answer

IE6で検証しましたが、「IE６だけ一部右寄りになる」ような状態が確認できませんでした。

ただ、少し気になる点がありましたので報告します。

#wrap要素のwidthが880pxに対して
 #wrap要素内のpaddingが左右それぞれ10+30=40px
 #left要素のwidthが645px
 #right要素のwidthが220px
合計すると
40px+645px+220px=905px
・・・と、親要素の幅を超えています。
これが原因ではないでしょうか？

IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・

普通のブラウザはスクロールバーを「描画領域」とはみなしません。

> よくわからないのが、なぜ一部分だけがずれているのか・・・

width:100%; を削除してみてください。

IE6で検証しましたが、「IE６だけ一部右寄りになる」ような状態が確認できませんでした。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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