Erstellen eines Vollfarben-Headers mit einem zentrierten Div-Inneren

Hier ist, was ich anstrebe, arbeiten 100% korrekt in Firefox 7 .

enter image description here

Wenn ich es in IE 8 öffne, wird es wie folgt angezeigt:

enter image description here

Hier ist das grundlegende Layout:

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

Mit allen Elementen innerhalb des # header-content .

Hier ist das relevante HTML und CSS, das auf JSFiddle gehostet wird. Wenn Sie das Vorschaufenster strecken, sehen Sie, dass der Inhalt in Firefox korrekt zentriert ist.

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

Warum zentriert IE das Div nicht wie es sollte?

0
@AlexeyIvanov Der gesamte Code befindet sich im JSFiddle-Link. Ich merke, dass ich einen Doctype vermisse. Was soll ich dann verwenden? Warum ist IE so nervig! :(
hinzugefügt der Autor Only Bolivian Here, Quelle
Es scheint das Problem war, dass ich einen Doctype vermisste. Setzen Sie es als Ihre Antwort ein und ich werde es akzeptieren. Vielen Dank für Ihre Zeit!
hinzugefügt der Autor Only Bolivian Here, Quelle
Können Sie uns den vollständigen Code zeigen? Einer der möglichen Gründe, warum "margin: auto" nicht funktioniert, ist, dass Sie keinen Doctype haben oder einen falschen haben.
hinzugefügt der Autor Alexey Ivanov, Quelle
Nun, Sie verwenden xhtml, also habe ich xhtml one zu JSFiddle hinzugefügt. Versuchen Sie es mit diesem: jsfiddle.net/agURs/
hinzugefügt der Autor Alexey Ivanov, Quelle
Bitte schön. :)
hinzugefügt der Autor Alexey Ivanov, Quelle

2 Antworten

IE fällt zurück in Quirks-Modus, wenn Sie Doctype in Ihrem HTML nicht haben. Und im Quirks-Modus Rand Auto; hat nicht funktioniert.

Hinzufügen von Doctype kann es lösen.

Richtiger Doctype und Header für xhtml (also xml-readers können verstehen, dass es xml ist und es parsen kann):

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

Wenn Sie jedoch eine XML-Zeile vor der DOCTYPE-Zeile platzieren, wird IE diese nicht akzeptieren (da DocType immer die erste Zeile des Dokuments ist). Damit es im IE funktioniert, sollten Sie schreiben:


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

oder nur:


1
hinzugefügt

Setzen Sie margin: 0 auto auf # header-content .

0
hinzugefügt