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

ここで私が目指しているのは、 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上で正しく中央に表示されます。

http://jsfiddle.net/stapiagutierrez/agURs/

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

0
@AlexeyIvanovコード全体がJSFiddleリンクにあります。私はdoctypeが不足していることに気付きました。それでは私は何を使うべきですか?なぜIEは非常にニッキーなのですか? :(
追加された 著者 Only Bolivian Here,
問題は、私がDoctypeを見逃していたようだ。あなたの答えとしてそれを入れ、私はそれを受け入れるでしょう。御時間ありがとうございます!
追加された 著者 Only Bolivian Here,
フルコードを表示できますか? 「margin:auto」が機能しない理由の1つは、doctypeを持っていないか、間違っているということです。
追加された 著者 Alexey Ivanov,
さて、あなたはxhtmlを使うので、xhtmlをJSFiddleに追加しました。これを試してみてください: jsfiddle.net/agurs/1
追加された 著者 Alexey Ivanov,
どういたしまして。 :)
追加された 著者 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
追加された

#header-contentmargin:0 auto を入れてみてください。

0
追加された