頁面不IE9

正確顯示我使用的引導與bootswatch與HTML5鍋爐板主題，以創建一個頁面。儘管它在Chrome和Firefox中正確顯示，但在IE9和IE8模式下無法正確顯示。但是，當我將IE9設置爲使用兼容模式時，它工作正常。問題是，在沒有兼容模式的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/

來源

2012-07-04 Hong Yi

你有沒有通過HTML驗證運行網頁嗎？ – Sparky

是的，我已經通過HTML驗證器運行它，我不認爲這會影響頁面如何出來。第13行，列64：差值X-UA-兼容於屬性HTTP的當量上元件的元。 ✉ –

有與你是如何使用的jsfiddle問題。你不應該包括'doctype'，整個''部分，或在HTML框中的任何''標籤。只有來自_inide_的代碼''去那裏。 jsFiddle將你的代碼放在他們的容器頁面中，可能你的頭部內容被忽略或重複。你設置它的方式使得一個不可靠的演示。 – Sparky

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

的代碼是你的問題，基本上你說如果不是IE7使用此代碼其中還包括IE9。您的＃sf-wrapper元素設置爲顯示：table;這使得它的寬度一樣寬，裏面的內容是（940px），只是集合＃SF-包裝到寬度：100％，它將被居中。

來源

2012-07-04 17:28:36

非常感謝。這工作！ –

回答

相關問題