我正在为一个页面编写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;}
答案 0 :(得分:3)
有很多已发布的内容...其中,您使用的是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>