页面在 IE9 中无法正确显示答案

【问题标题】：page does not displaying correctly in IE9页面在 IE9 中无法正确显示
【发布时间】：2012-11-05 01:07:18
【问题描述】：

我正在使用带有 html5 样板的 bootswatch 主题的引导程序来创建页面。尽管它在 Chrome 和 Firefox 中正确显示，但在 IE9 和 IE8 模式下无法正确显示。但是，当我将 IE9 设置为使用兼容模式时，它可以正常工作。问题是在没有兼容模式的 IE9 中，页面不对齐并停留在左侧。想知道我哪里出错了。提前致谢！

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <!-- More ideas for your head here: h5bp.com/d/head-Tips -->

  <!-- For the sticky footer -->
    <!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->
  <style>
      #content-main {
        padding-top:63px;
       }

      #form-language {
        margin-top: 15px;
      }
  </style>
  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="extras/h5bp/js/libs/modernizr-2.5.3.min.js"></script>
</head>

代码在这里：http://jsfiddle.net/WWphP/

【问题讨论】：

您已经通过 HTML Validator 运行您的页面了吗？
是的，我已经通过 html 验证器运行了它，我认为它不会影响页面的输出方式。第 13 行，第 64 列：元素元上属性 http-equiv 的错误值 X-UA-Compatible。 ✉
您使用 jsFiddle 的方式存在问题。您不应该在 HTML 框中包含doctype、整个<head> 部分或任何<body> 标记。只有来自<body></body> 标签的inside 的代码才会到那里。 jsFiddle 将您的代码放在他们的容器页面中，并且您的 head 内容可能会被忽略或重复。您设置它的方式使演示不可靠。
啊。我真的很抱歉，但同样的问题仍然存在，即使它不可靠。

标签： css html twitter-bootstrap internet-explorer-9 bootswatch

【解决方案1】：

<!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->

上面的代码是你的问题，基本上你说如果不是IE7使用这个代码，它也包括IE9。您的 #sf-wrapper 元素设置为 display: table;这使得它的宽度与里面的内容一样宽 (940px)，只需 将 #sf-wrapper 设置为 width:100% 它将居中。

【讨论】：