创建一个内部居中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 中的所有元素。

这是JSFiddle上托管的相关HTML和CSS。如果拉伸预览窗格,您将看到内容在Firefox上正确居中。

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

为什么IE不应该以div为中心?

0
@AlexeyIvanov整个代码都在JSFiddle链接中。我注意到我错过了一个doctype。那我应该怎么用?为什么IE如此精彩! :(
额外 作者 Only Bolivian Here,
似乎问题是我错过了Doctype。把它作为你的答案,我会接受它。谢谢你的时间!
额外 作者 Only Bolivian Here,
你能告诉我们完整的代码吗? “margin:auto”无效的可能原因之一是您没有doctype或者有错误的doctype。
额外 作者 Alexey Ivanov,
好吧,你使用xhtml,所以我将一个xhtml添加到JSFiddle。试试这个: jsfiddle.net/agURs/1
额外 作者 Alexey Ivanov,
别客气。 :)
额外 作者 Alexey Ivanov,

2 答案

如果你的html中没有doctype,IE会回到怪癖模式。而在怪癖模式边缘自动;不起作用。

添加doctype可以解决它。

正确的doctype和xhtml的标题(所以xml-readers可以理解它是xml并且可以解析它)是:

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

但是如果你在DOCTYPE行之前放置xml行,IE将不会接受它(因为它认为doctype始终是文档的第一行)。所以为了使它在IE中工作你应该写:


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

要不就:


1
额外

尝试将 margin:0 auto 添加到#header-content

0
额外