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上延伸

回答

相关问题