中心の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
追加された
ビュー: 27
源
ro ru fr es pt de zh hi bn ar be uk
@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-content に margin：0 auto を入れてみてください。

0
追加された
源