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

时间:2021-10-12 08:10:23

I am creating a template for a website.

我正在为网站创建一个模板。

The example is at Framework Login Page
The main CSS sheet is at: master.css

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

I am trying to center the main parent div.

我试图将主要父div中心化。

I am using

我在用

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

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

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

What could the issue be?

问题是什么?

3 个解决方案

#1


3  

This is a (very) old IE bug.

这是一个(非常)旧IE漏洞。

Fortunately, it's been fixed since IE 6, but you do need to have a proper doctype on your page to cause IE to use "standards" rendering mode and respect your margin: auto style. On a page without a doctype, IE instead uses "quirks" mode, which falls back to old, non-standard behavior.

幸运的是,自IE 6以来它已被修复,但你需要在你的页面上有一个正确的doctype以使IE使用“标准”渲染模式并尊重你的边距:自动样式。在没有doctype的页面上,IE使用“quirks”模式,这种模式可以回溯到旧的非标准行为。

Quirksmode has a good page on doctypes and standards mode that explains why you want to make sure your pages have a correct doctype, including some nice tables spelling out what each browser will do differently in quirks and standards mode.

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

#2


0  

Set the CSS for your "body" div to include:

设置“body”div的CSS包括:

text-align: center;

And remove any text-aligns you may have on the "inner_body" div, it should inherit from body.

并删除你在“inner_body”div上可能有的任何文本对齐,它应该从body继承。

#3


0  

Here is the explanation why you should use the correct doctype.

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

  1. Use the correct DOCTYPE ( Document Type Definition, or DTD)
  2. 使用正确的DOCTYPE(文档类型定义,或DTD)

This defines which version of HTML or XHTML your document is actually using. It's needed by browsers or other tools to process the document correctly.

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

Using an incomplete, outdated or no DOCTYPE at all, throws some browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup.

使用不完整,过时或根本没有DOCTYPE会将某些浏览器抛入“Quirks”模式,浏览器会假定您编写了老式的无效标记。

This means that your web pages may not render well in all the major browsers.

这意味着您的网页可能无法在所有主流浏览器中良好呈现。

#1


3  

This is a (very) old IE bug.

这是一个(非常)旧IE漏洞。

Fortunately, it's been fixed since IE 6, but you do need to have a proper doctype on your page to cause IE to use "standards" rendering mode and respect your margin: auto style. On a page without a doctype, IE instead uses "quirks" mode, which falls back to old, non-standard behavior.

幸运的是,自IE 6以来它已被修复,但你需要在你的页面上有一个正确的doctype以使IE使用“标准”渲染模式并尊重你的边距:自动样式。在没有doctype的页面上,IE使用“quirks”模式,这种模式可以回溯到旧的非标准行为。

Quirksmode has a good page on doctypes and standards mode that explains why you want to make sure your pages have a correct doctype, including some nice tables spelling out what each browser will do differently in quirks and standards mode.

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

#2


0  

Set the CSS for your "body" div to include:

设置“body”div的CSS包括:

text-align: center;

And remove any text-aligns you may have on the "inner_body" div, it should inherit from body.

并删除你在“inner_body”div上可能有的任何文本对齐,它应该从body继承。

#3


0  

Here is the explanation why you should use the correct doctype.

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

  1. Use the correct DOCTYPE ( Document Type Definition, or DTD)
  2. 使用正确的DOCTYPE(文档类型定义,或DTD)

This defines which version of HTML or XHTML your document is actually using. It's needed by browsers or other tools to process the document correctly.

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

Using an incomplete, outdated or no DOCTYPE at all, throws some browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup.

使用不完整,过时或根本没有DOCTYPE会将某些浏览器抛入“Quirks”模式,浏览器会假定您编写了老式的无效标记。

This means that your web pages may not render well in all the major browsers.

这意味着您的网页可能无法在所有主流浏览器中良好呈现。