Bootstrap 3 - 容器在IE8上延伸

我正在爲一個頁面編寫HTML，並使用了bootstrap 3。該頁面在FF，Chrome，IE9中似乎沒問題，但在IE8，IE7中無法正常工作。Bootstrap 3 - 容器在IE8上延伸

問題：主要內容似乎在整個頁面上被完全拉伸，即表現得像流體一樣，在其他瀏覽器中工作正常。

事情我試圖：由於在其他論壇給出的，我試圖包括respond.js，元標記如以下代碼（「X-UA-兼容」內容=「IE =邊緣」），HTML5shiv但沒有似乎工作。我讀過bootstrap 3並不支持IE7，但即使是IE8也會出現這個問題。它看起來像容器類不適用於IE8/7。

任何人都可以請幫忙嗎？下面是這個HTML。此外，其對小提琴 - http://jsfiddle.net/CPaDb/2/

代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title></title> 
<link rel="stylesheet" type="text/css" href="css/main.css"/> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
<!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 

<body> 
<div class="container"> 
    <div class="logo-cont"> 
     <a href="home.html" class="logo-link></a> 
    </div> 

    <div class="main-cont"> 
     <div class="site-box-cont"> 
      <ul class="site-box-list clearfix"> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
      </ul> 

     </div> 
    </div> 
</div> 
<script language="javascript" type="application/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script language="javascript" type="application/javascript" src="js/bootstrap.min.js"></script> 
<script language="javascript" type="application/javascript" src="js/respond.min.js"></script> 
</body> 
</html>

CSS

.logo-cont {padding:35px 0 35px 250px;} 
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; } 

.main-cont {background:#2d3a42;} 
.site-box-cont {width:670px; margin:0 auto; padding:150px 0} 
.site-box-list li {float:left; margin:0px 15px 15px 0px;} 
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;} 
.site-box:hover {background:#acd037;}

來源

2013-08-29 whyAto8

我有這個問題，甚至引導2.最後，我只是增加了一個IE7/8只樣式表和定身寬940px – Bojangles

有一個發行數量回事......其中的，你使用XHTML 1.0 doctype，而不是HTML5類型;你錯過了「home.html」鏈接上的結束引號。

由於JSFiddle與IE8測試不兼容，我無法發佈JSFiddle演示。但我有IE8，並在IE8，FF17和Chrome 29中測試了以下代碼。讓我知道如果您需要更進一步或有任何問題。

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<title>Bootstrap Sample</title> 

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<style type="text/css"> 
.logo-cont {padding:35px 0 35px 250px;} 
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; } 

.main-cont {background:#2d3a42;} 
.site-box-cont {width:670px; margin:0 auto; padding:150px 0} 
.site-box-list li {float:left; margin:0px 15px 15px 0px;} 
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;} 
.site-box:hover {background:#acd037;} 
</style> 
<script src="js/jQuery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/respond.min.js"></script> 
<!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 

<body> 

<div class="container"> 

    <div class="logo-cont"> 
     <a href="home.html" class="logo-link"></a> 
    </div> 

    <div class="main-cont"> 
     <div class="site-box-cont"> 
      <ul class="site-box-list clearfix"> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
      </ul> 

      </div> 
     </div> 
</div> 

</body> 
</html>

來源

2013-09-09 21:03:24 PhilNicholas

我意識到的是，它是所有類型的相關respond.js不工作。它需要在IE8中使媒體查詢工作，並且它不在本地工作，但在本地主機上運行解決了這個問題。但是我看到你的投入也很有用，把它們全部集中起來。謝謝。 – whyAto8

謝謝，@ whyAto8。不幸的是，由於瀏覽器的安全限制，Respond.js在本地不起作用，因爲我們[在另一個線程上討論過]（http://stackoverflow.com/questions/18544310/respond-js-not-working-locally-support-對於媒體的查詢功能於IE8/18708054）。 PS：如果我上面的回答確實回答了你的問題，你能否將它標記爲可接受的答案？ – PhilNicholas

Bootstrap 3 - 容器在IE8上延伸

回答

相關問題