中心のdivを内側に持つ単色のヘッダーを作成する

Question

ここで私が目指しているのは、 Firefox 7 で100％正しく動作することです。

enter image description here

IE 8 で開くと、次のように表示されます。

enter image description here

基本的なレイアウトは次のとおりです。

<div id="header-home">
    <div id="header-content">
    </div>
</div>

＃header-content の中にあるすべての要素を使用します。

関連するHTMLとCSSはJSFiddleでホストされています。プレビューパネルを引き伸ばすと、内容がFirefox上で正しく中央に表示されます。

IEはなぜそれを行うべきであるのか？

0

追加された 27 10月 2011 〜で 01:28 著者 Only Bolivian Here

ビュー: 41

@AlexeyIvanovコード全体がJSFiddleリンクにあります。私はdoctypeが不足していることに気付きました。それでは私は何を使うべきですか？なぜIEは非常にニッキーなのですか？ :(

追加された 27 10月 2011 〜で 01:37, 著者 Only Bolivian Here, 源

問題は、私がDoctypeを見逃していたようだ。あなたの答えとしてそれを入れ、私はそれを受け入れるでしょう。御時間ありがとうございます！

追加された 27 10月 2011 〜で 01:43, 著者 Only Bolivian Here, 源

フルコードを表示できますか？「margin：auto」が機能しない理由の1つは、doctypeを持っていないか、間違っているということです。

追加された 27 10月 2011 〜で 01:36, 著者 Alexey Ivanov, 源

さて、あなたはxhtmlを使うので、xhtmlをJSFiddleに追加しました。これを試してみてください： jsfiddle.net/agurs/1

追加された 27 10月 2011 〜で 01:41, 著者 Alexey Ivanov, 源

どういたしまして。 :)

追加された 27 10月 2011 〜で 01:44, 著者 Alexey Ivanov, 源

2 答え

あなたのhtmlにdoctypeを持っていなければ、IEはquirksモードに戻ります。そしてクォークモードマージンオートで;動作しませんでした。

doctypeを追加することでそれを解決できます。

右doctypeとxhtmlのヘッダ（xml-読者はそれがxmlであり、それを解析できることを理解できる）：

<?xml version="1" encoding="UTF-8"?>

しかし、DOCTYPE行の前にxml行を置くと、IEはそれを受け入れません（doctypeは常にドキュメントの最初の行だと思うので）。だからIEで動作させるには、次のように書くべきです：


<?xml version="1" encoding="UTF-8"?>

あるいは単に：

1

追加された 27 10月 2011 〜で 01:50 著者 Alexey Ivanov

著者 MCSI · Answer 1 · 2011-10-27T01:43Z

＃header-content に margin：0 auto を入れてみてください。