Een koptekst met een vaste kleur maken met een gecentreerde div binnenin

Dit is waar ik naar streef, 100% correct werkend in Firefox 7 .

enter image description here

Wanneer ik het in IE 8 open, wordt het als volgt weergegeven:

enter image description here

Hier is de basislay-out:

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

Met alle elementen in de # header-content .

Hier is de relevante HTML en CSS gehost op JSFiddle. Als u het voorbeeldvenster uitrekt, ziet u dat de inhoud correct in Firefox is gecentreerd.

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

Waarom centreert IE de div niet zoals het zou moeten?

 0
toegevoegd
Bekeken: 5
de bron
ro ru fr es pt de zh hi bn ar be uk
@AlexeyIvanov De volledige code staat in de JSFiddle-link. Ik merk dat ik een doctype mis. Wat moet ik dan gebruiken? Waarom is IE zo finnicky! :(
toegevoegd de auteur Only Bolivian Here, de bron
Het lijkt erop dat het probleem was dat ik een Doctype miste. Zet het in als uw antwoord en ik accepteer het. Bedankt voor je tijd!
toegevoegd de auteur Only Bolivian Here, de bron
Kun je ons de volledige code laten zien? Een van de mogelijke redenen waarom "margin: auto" niet werkt, is dat u geen doctype hebt of een verkeerd exemplaar hebt.
toegevoegd de auteur Alexey Ivanov, de bron
Nou, je gebruikt xhtml, dus ik heb xhtml toegevoegd aan JSFiddle. Probeer dit eens: jsfiddle.net/agURs/1
toegevoegd de auteur Alexey Ivanov, de bron
Graag gedaan. :)
toegevoegd de auteur Alexey Ivanov, de bron

2 antwoord

IE daalt terug naar de quirks-modus als u geen doctype in uw HTML hebt. En in eigenaardigheden marge auto; werkte niet.

Het toevoegen van doctype kan dit oplossen.

Rechts doctype en header voor xhtml (dus xml-lezers kunnen begrijpen dat het xml is en kan het parseren) is:

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

Maar als u xml-regel vóór de DOCTYPE-regel plaatst, zal IE dit niet accepteren (omdat het denkt dat doctype altijd de eerste regel van het document is). Dus om het in IE te laten werken, zou je moeten schrijven:


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

of gewoon:
1
toegevoegd
de bron

Probeer margin: 0 auto in # header-content te plaatsen.

0
toegevoegd
de bron