css box ieだけ中央寄せ出来ない

質問

サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。

<style type="text/css">
<!--
body {
background-color: #EEEEEE;
}
.mainbox{
width:900px;
height:1000px;
padding:6px 6px 2px 2px;
border:8px;
margin-left: auto;
margin-right: auto;
text-align:left;
background-color:#bde9ba;}
body
{
overflow: hidden;
}
-->
</style>

<div class="mainbox">
内容
</div>

質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？　IE迷惑ですｗ

回答No.2

tracer · ベストアンサー

IEのバージョンはいくつですか？
htmlをstrictで書いている限りは、margin:0 autoでセンタリングできないのはIE6だけだと思います。IE6を対象にする場合は、text-align:centerは使わざるを得ないのではないでしょうか。センタリングする方法は、他にもいろいろありますが、結果的にtext-align:centerが一番簡単で効率がよいと思います。

IE6でセンタリングする主な例
・text-align:center
・display:table-cell;
・テーブルレイアウト
・javascriptでのレイアウト

繰り返しますが、正常に表示できるブラウザに迷惑をかけない方法は、text-align:centerの一択のような気がします。
あと、IEの自動アップデートが少し前に始まり、今後IE6が消えていくものだと思われましたが、手持ちのアクセス解析を見る限り、IE6のアクセス数にまったく変動がありません。結局のところ、XPがなくなるのを待つしか方法がないのかもしれません。

お礼

回答有難うございます

回答No.3

DrFell

クローム、オペラ、モジラではｃｓｓ通りの解釈ですが、IEは正しくない解釈をします。迷惑ですね。でも、無視できない場合にはstyle="text-align:centerを使います。ただし、考えておられる場所が違うようです。なぜ、使いたくないかを教えていただければ他の手法や逃げ道があるかもしれません。

IEの一部はボックスレベル要素とインライン要素の区別がつかない解釈なので、インライン要素のtext-alignをボックスに効かせ、ボックスへは効くはずのmargin:autoを効かせないバグがあります。mainboxの親要素、アップされているソースだとbodyにtext-align:center;をいれ、mainboxではtext-align:left;に戻します。

<style type="text/css">
<!--
body {
background-color: #EEEEEE;
text-align:center;/*こっちに使います*/
}
.mainbox{
width:900px;
height:1000px;
padding:6px 6px 2px 2px;
border:8px;
margin-left: auto;
margin-right: auto;
text-align:left;/*こっちはこのままでＯＫ*/
background-color:#bde9ba;}
body
{
overflow: hidden;
}
-->
</style>

<div class="mainbox">
内容
</div>

お礼

回答有難うございます

回答No.1

ORUKA1951

IEには、過去の、ウェブ標準でないへんてこな解釈をするブラウザが存在し、それに合わせて作成された多くのサイトが実在するという問題があります。その古い仕様に合わせて動作するときは、ウェブ標準の挙動をしません。
　肝心のIEのバージョンが示されていませんが、きちんと期待通りに表示されない一番の原因は、過去の仕様に合わせた『互換モード』で動作していることが多いです。HTMLをウェブ標準で記述し、<!DOCTYPE>宣言をきちんと記述すると、他の標準ブラウザと同じ動作になります。
doctype スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&sugexp=frgbld&gs_nf=1&gs_is=1&cp=12&gs_id=c1&xhr=t&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&pf=p&safe=off&sclient=psy-ab&oq=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=0&aqi=g1&aql=&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=26b0aea1e5c4f16a&biw=1016&bih=603 )

　基本は、HTML4.01strictで記述すればよいといえます。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
著者
・・・【中略】・・・
　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より

　ちゃんとできているかどうかは
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
　でチェックする。

　なお、class名は、「文書に構造を付加するための一般機構を提供する ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」のが目的ですから、
<div class="article">のような具体的に文書構造を示すものにしましょう。
　articleの意味は、HTML5の3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )のarticleの意味を参照してください。

<style type="text/css">
<!--
body {
background-color: #EEEEEE;
}
div.article{
width:90%;min-width:480px;max-width:900px;
margin:0 auto;
border:8px;
background-color:#bde9ba;
}
-->
</style>
★paddingをコンテナブロックに指定すると、padding辺の内側までがサイズとなります。(互換モードではボーダー辺)
　そのため、期待したサイズ(900px)より枠が大きくなってしまいます。ここでpaddingは指定せず、抱合されたブロックのmarginで余白を取ること
★marginは、簡略化プロパティでひとつにまとめましょう。
★height/overflow:hiddenを指定すのは止めましょう。ユーザーが視覚弱者でフォントを大きくするとはみ出したものが見れなくなります。
★スマホや幅広ディスプレイでの利用を考慮するとサイズを決め打ちしないほうが良いでしょう。

なお、IE6を考慮売る必要はすでにありませんが、対処するならbodyにtext-alignを指定してarticleにtext-align:left;を指定しても良いでしょう。(text-alignはブロックを中央配置するものではないのですが、IEの互換モードではこれでないと中央に置かれない<---誤った解釈です。)

お礼

回答有難うございます