Question

由于某种原因，.container元素不会在IE8中居中。以下是演示我遇到的问题的最小代码：

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head><body>
    <div id="content" class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>Test</p>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body></html>

在线演示：http://tinyurl.com/ndn64tz

Answer 1

我不确定是什么问题，当我在我的机器上尝试它时（IE11更改了用户代理），它看起来很好.. 这个技巧应该工作..（覆盖容器

.container{
  width:1020px; //or your desired width
  margin:0 auto;
  padding:10px;
}

如果需要，进行适当的更改。

替代回答：

在引用所有样式表后包含此库..

https://github.com/scottjehl/Respond

这将在旧浏览器中启用CSS3媒体查询。

并添加<meta http-equiv="X-UA-Compatible" content="IE=edge">

备选答案的来源：IE8 issue with Twitter Bootstrap 3

Answer 2

不要忘记阅读bootstrap doc http://getbootstrap.com/getting-started/#browsers

也使用此标记

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer 3

<!DOCTYPE>
<html>

OR

<!--[if IE 8]><center><![endif]-->
 <section id="first" class="container">
    <div class="row">
     <!--[if IE 8]></center><![endif]-->
    <div class="col-lg-12">Helo World</div>
    </div>
 </section>

只需添加中心标记

即可

Bootstrap .container不在IE8中居中

3 个答案: