3

我正在为页面编写 HTML，并且也使用了 bootstrap 3。该页面在 FF、Chrome、IE9 中似乎很好，但在 IE8、IE7 中无法正常工作。

问题：主要内容似乎在页面上完全伸展，即表现得像在其他浏览器中正常工作的流体一样。

我尝试过的事情：正如在其他论坛中给出的那样，我尝试在下面的代码中包含 response.js、元标记（“X-UA-Compatible”内容=“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;}
4

1 回答 1

3

有许多问题正在进行中……其中，您使用的是 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>
于 2013-09-09T21:03:24.440 回答