Question

我正在为一个页面编写HTML，并且也使用了bootstrap 3。该页面在FF，Chrome，IE9中显示正常，但在IE8，IE7中无法正常工作。

问题：主要内容似乎在整个页面中完全拉伸，即表现得像其他浏览器中的流畅工作一样。

我尝试过的事情：正如在其他论坛中所做的那样，我尝试了包含respond.js，meta标签，如下面的代码所示（“X-UA-Compatible”content =“IE = edge”），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;}

Answer 1

有很多已发布的内容...其中，您使用的是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>

Bootstrap 3 - 在IE8上展开的容器

1 个答案: