Html 引导程序3-在IE8上拉伸容器_Html_Css_Twitter Bootstrap_Internet Explorer 8_Twitter Bootstrap 3

Html 引导程序3-在IE8上拉伸容器

html css twitter-bootstrap internet-explorer-8 twitter-bootstrap-3

Html 引导程序3-在IE8上拉伸容器,html,css,twitter-bootstrap,internet-explorer-8,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Internet Explorer 8,Twitter Bootstrap 3,我正在为一个页面编写HTML，并使用了Bootstrap3。该页面在FF、Chrome、IE9中看起来不错，但在IE8、IE7中工作不正常问题：主要内容似乎在整个页面上被完全拉伸，即在其他浏览器工作正常的情况下，其行为就像流体一样我尝试过的事情：在其他论坛中，我尝试过包括respond.js、meta标记，如下面的代码（“X-UA-Compatible”content=“IE=edge”）、HTML5shiv，但似乎没有任何效果。我读到Bootstrap3并不正式支持IE7，但即使是IE8也

我正在为一个页面编写HTML，并使用了Bootstrap3。该页面在FF、Chrome、IE9中看起来不错，但在IE8、IE7中工作不正常

问题：主要内容似乎在整个页面上被完全拉伸，即在其他浏览器工作正常的情况下，其行为就像流体一样

我尝试过的事情：在其他论坛中，我尝试过包括respond.js、meta标记，如下面的代码（“X-UA-Compatible”content=“IE=edge”）、HTML5shiv，但似乎没有任何效果。我读到Bootstrap3并不正式支持IE7，但即使是IE8也存在这个问题。看起来容器类没有应用于IE8/7

有人能帮忙吗？下面是它的HTML。此外，它的小提琴-

代码

<!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>

有一些发行正在进行。。。其中，您使用的是XHTML1.0doctype，而不是HTML5类型；“home.html”链接上缺少结束引号

由于JSFIDLE与IE8测试不兼容，因此我无法发布JSFIDLE演示。但我有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>


引导样本
.logo cont{padding:35px 0 35px 250px；}
.logo链接{背景：url（../images/logo.png）不重复；宽度：177px；高度：59px；显示：block；}
.main cont{背景：#2d3a42；}
.site框cont{宽度：670px；边距：0自动；填充：150px 0}
.site box list li{float:左；边距：0px 15px 15px 0px；}
.site框{宽度：150px；高度：150px；显示：内联块；背景：#fff；边框半径：25px；}
.site框：悬停{背景：#acd037；}

我甚至在Bootstrap 2上也遇到过这个问题。最后，我添加了一个仅限IE7/8的样式表，并将主体宽度设置为940px。我意识到这一切都与respond.js不工作有关。在IE8中进行媒体查询是必需的，它在本地不起作用，但在本地主机上运行解决了这个问题。但我认为你们的投入也很有用，把这些都考虑进去了。谢谢，谢谢，@whyAto8。不幸的是，由于浏览器中的安全限制，Respond.js无法在本地工作，正如我们所说。附言：如果我上面的回答确实回答了你的问题，你是否应该把它标记为可接受的答案？

<!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>