Question

这就是我的目标，在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为中心？

Answer 1

如果你的html中没有doctype，那么IE会回到怪癖模式。而在怪癖模式边缘自动;没用。

添加doctype可以解决它。

xhtml的正确doctype和标题（因此xml-readers可以理解它是xml并且可以解析它）是：

<?xml version="1" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但是如果你在DOCTYPE行之前放置xml行，IE就不会接受它（因为它认为doctype始终是文档的第一行）。因此，要使其在IE中运行，您应该写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1" encoding="UTF-8"?>

或只是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 2

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

创建一个内部居中div的纯色标题

2 个答案: