我正在为页面编写 HTML，并且也使用了 bootstrap 3。该页面在 FF、Chrome、IE9 中显示正常，但在 IE8、IE7 中无法正常工作。
问题:主要内容似乎在整个页面上完全拉伸(stretch)，即在其他浏览器中运行良好的情况下表现得像流体。
我尝试过的事情:正如在其他论坛中给出的那样，我尝试在下面的代码中包含 respond.js、元标记 ("X-UA-Compatible"content="IE=edge") , HTML5shiv 但似乎没有任何效果。我读到 bootstrap 3 不正式支持 IE7，但即使是 IE8 也会出现这个问题。看起来容器类不适用于IE8/7。
有人可以帮忙吗？下面是它的 HTML。此外，它在 fiddle 上 - 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;}
最佳答案
有许多问题正在发生……其中，您使用的是 XHTML 1.0 文档类型，而不是 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>
关于html - Bootstrap 3 - 容器在 IE8 上拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18508173/