1

ページを作成するために、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/

4

1 に答える 1

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

上記のコードはあなたの問題です。基本的に、IE7でない場合は、IE9も含むこのコードを使用すると言います。＃sf-wrapper要素は次を表示するように設定されています：table; これにより、内部のコンテンツと同じ幅（940px）になります。 ＃sf-wrapperをwidth：100％に設定するだけで、中央に配置されます。

于 2012-07-04T17:28:36.617 に答える