- ベストアンサー
IEでCSSの中央寄せが効かない
- common.cssという外部CSSファイルで.main{}としているが、IE8では中央寄せが効かない。
- HTMLのheadタグ内で外部CSSファイルを読み込んでいるが、IE8では中央寄せがされない。
- IE8で中央寄せが効かない問題の解決方法はどうすれば良いか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
手元にIE8がないので実際の検証はできませんが、IE8にはDOCTYPE スイッチとはまた異なる3種類のモード・スイッチが存在する様です。 【参考】http://standards.mitsue.co.jp/archives/001326.html 上記から引用ここから--------------------------------------------------------------------------- IE8には3つのレンダリングモードが存在します。 IE8モード CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。 IE7モード IE7の標準準拠モードと同じ IE5モード IE7やIE6の互換モードと同じ 上記から引用ここまで--------------------------------------------------------------------------- で、更に下記のコンテンツには、どの様な条件下でどの様なモードになるか、の検証結果が一覧になっています。 【参考】http://hxxk.jp/2008/09/29/0118#sub-20080929-06 上記の「DOCTYPE スイッチの一覧表」という項目を見て下さい。この検証結果に依ると、質問者様のHTMLは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ですから、この場合、IE8は「IE5モード」になっている事になります。上記の引用に説明があります通り、IE5モードというのはIE7やIE6の「後方互換モード」と同じ挙動をします。 この「IE7やIE6の後方互換モード」においては、CSSの本来の仕様に準拠しない表示が数多く出てきてしまいます。例えば、”margin: auto;”が無効になるのもその一つです（その他にも沢山やっかいなバグが…下記をご覧になってみて下さい）。 【参考】http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=0 つまり、現在の質問者様の検証環境では”margin: auto;”が効いていない事になりますので、当然「中央寄せ」にはなりません。 DOCTYPEを変えられる様なら、（IE8が標準準拠モードで挙動するものに）変えてしまった方が良いでしょう。変えられないのであれば、IEの後方互換モード対策として、CSSを以下の様に変更してみて下さい。 body { text-align: center; } .main { width:800px; margin: 0 auto; text-align: left; } IE6時代からよく使われる対処法の一つです。
その他の回答 (2)
既に回答は出てますが、こんな時には「検索」が有効。 CSS ハック （ブラウザ名） （したい事） 等とフォームに入力して実行。
補足
http://www.recipe-de-cooking.com/ では同じように表記してIEでも中央寄せになっています。 なぜか私が作成した場合は中央寄せになりません。 text-align:center; とした場合はロゴとか画像が中央寄席になってしまいます。
- rukuku
- ベストアンサー率42% (401/933)
こんばんは .mainに text-align:center; を追加してください。 他にも方法はあるので、以下を参照してください。 http://oshiete1.goo.ne.jp/qa5046862.html
補足
http://www.recipe-de-cooking.com/ では同じように表記してIEでも中央寄せになっています。 なぜか私が作成した場合は中央寄せになりません。 text-align:center; とした場合はロゴとか画像が中央寄席になってしまいます。
補足
おそらくDOCTYPE宣言のところの問題だとは思っているのですが、根本的な理由がわかっていません。ちょっと考えて見ます。