Question

我正在为网站创建模板。

示例位于Framework Login Page
CSS主页位于：master.css

我正在尝试将主要父div居中。

我正在使用

#body {
  width: 100%;
  background: url('pathtoimage.png');
}

#inner_body{
  width: 800px;
  margin: auto;
}

<body>
  <div id="body">
    <div id="inner_body"></div>
  </div>
</body>

问题是什么？

Answer 1

这是一个（非常）旧IE漏洞。

幸运的是，自IE 6以来它已被修复，但您需要在页面上使用适当的doctype以使IE使用“标准”渲染模式并尊重您的margin: auto样式。在没有doctype的页面上，IE使用“quirks”模式，这种模式可以回溯到旧的非标准行为。

Quirksmode有一个很好的page on doctypes and standards mode，它解释了为什么你要确保你的页面有一个正确的doctype，包括一些很好的表格，说明每个浏览器在怪癖和标准模式下会做的不同。

Answer 2

将“body”div的CSS设置为包括：

text-align: center;

并删除“inner_body”div上可能包含的任何文本对齐，它应该从body继承。

Answer 3

以下是您应该使用正确的doctype的原因。

使用正确的DOCTYPE（文档类型定义，或 DTD）

这定义了您的文档的HTML或XHTML版本实际上正在使用。它是浏览器或其他工具所需要的正确处理文件。

使用不完整，过时或根本没有DOCTYPE，抛出一些浏览器进入“Quirks”模式，浏览器假设你写过老式的，无效的标记。

这意味着您的网页可能无法很好地呈现主流浏览器。

IE中不能水平居中固定宽度div

3 个答案: