<div id="header-content"> </div> </div> #header-content"> <div id="header-content"> </div> </div> #header-content"> <div id="header-content"> </div> </div> #header-content" />
ここで私が目指しているのは、 Firefox 7 で100%正しく動作することです。
Firefox 7
IE 8 で開くと、次のように表示されます。
IE 8
基本的なレイアウトは次のとおりです。
<div id="header-home"> <div id="header-content"> </div> </div>
#header-content の中にあるすべての要素を使用します。
#header-content
関連するHTMLとCSSはJSFiddleでホストされています。プレビューパネルを引き伸ばすと、内容がFirefox上で正しく中央に表示されます。
http://jsfiddle.net/stapiagutierrez/agURs/
IEはなぜそれを行うべきであるのか?
あなたのhtmlにdoctypeを持っていなければ、IEはquirksモードに戻ります。そしてクォークモードマージンオートで;動作しませんでした。
doctypeを追加することでそれを解決できます。
右doctypeとxhtmlのヘッダ(xml-読者はそれがxmlであり、それを解析できることを理解できる):
<?xml version="1" encoding="UTF-8"?>
しかし、DOCTYPE行の前にxml行を置くと、IEはそれを受け入れません(doctypeは常にドキュメントの最初の行だと思うので)。だからIEで動作させるには、次のように書くべきです:
あるいは単に:
#header-content に margin:0 auto を入れてみてください。
margin:0 auto