【问题标题】:Internet Explorer CSS - Center DivInternet Explorer CSS - 中心区
【发布时间】:2012-05-23 08:33:05
【问题描述】:

我最近创建了一个网站,但我在使用 Internet Explorer 时遇到了一个非常大的问题。 CSS 似乎在 IE 中做了一些奇怪的事情。 这里不是复制数百行 CSS 而是指向该站点页面的链接:http://www.appwheal.com/app/ios/angry-birds-space 所有内容应显示在屏幕中间。取而代之的是 IE 它被卡在左边。

我正在使用

margin-left: auto;

margin-right: auto;

这个是IE支持的吧。

请提前帮助和感谢。

【问题讨论】:

标签: html css internet-explorer doctype


【解决方案1】:

您需要声明一个DOCTYPE,否则 Internet Explorer 默认为 Quirks 模式(IE5 兼容)。进入 Internet Explorer,按 F12 以调出开发者工具,并注意它在文档模式下显示“怪癖”模式。 Quirks 不支持任何已知的 div 居中方法,并且声明 DOCTYPE 是修复它的最简单(也是推荐)的方法。

要将页面设置为 XHTML 1.0 过渡(最常见),请使用

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

要声明页面与 HTML5 兼容,请使用

<!DOCTYPE html>

DOCTYPE 行必须是 html 文件中的第一行,出现在开头的 &lt;html&gt; 标记之前。

【讨论】:

  • 谢谢,我觉得我忘了这个很傻。至少我不必更改大量 CSS。
  • 非常感谢您的解释!
【解决方案2】:

你还必须设置

body {
    text-align: center;
}

#yourDiv {
    margin: 0 auto;
    text-align: left;
}

【讨论】:

  • DOCTYPE 未设置; IE 正在以 Quirks 模式呈现页面。
  • 是的,如果你把开发者工具里的文档模式改成IE7,不用改CSS就可以完美运行,所以不需要在body中设置text-align: center
  • 好的,我给你。但一般来说,设置margin: 0 auto; 被认为只是解决方案的一半。有很多教程说为了可靠性,你应该包括其他部分(对齐中心为主体,左对齐为你的包装)
【解决方案3】:

设置边距和宽度:

#yourDiv {
  margin: 0 auto;
  width: 300px;
}

【讨论】:

    【解决方案4】:

    你可以使用老派的 text-align:center 并尝试 top:50%;左:50%;并偏移合适的负像素

    【讨论】:

      猜你喜欢
      • 2013-08-15
      • 2011-12-28
      • 2014-04-05
      • 2012-03-26
      • 2013-05-03
      • 1970-01-01
      • 1970-01-01
      • 2020-05-23
      • 2017-08-09
      相关资源
      最近更新 更多