IE8 的 Bootstrap 3 问题答案

【问题标题】：Bootstrap 3 issue with IE8IE8 的 Bootstrap 3 问题
【发布时间】：2014-04-01 03:55:24
【问题描述】：

这个问题已经被别人问过了，我尝试了那里的建议，但没有成功。 Link

所以这是我的问题，我使用 Bootstrap 3 创建了一个简单的登录页面，它在除 IE8 之外的所有浏览器中都能正常工作，整个页面在 IE8 中延伸到全宽。另一个问题是，所有浏览器的页面底部都会出现滚动条。滚动条问题截图http://i42.tinypic.com/sqgh82.png

HTML

<!DOCTYPE html>
<html>
<head>
<meta 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 3</title>

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/style.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="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>

<style>
body{
    background-color:#f2f2f2;
}
</style>

</head>

<body>


<div class="row">

<div id="login_panel_alerts" class="col-lg-4 center">
    <div class="alert alert-danger">Something went wrong!<button type="button" class="close" data-dismiss="alert">&times;</button></div>
    <div class="alert alert-success">Success!</div>
</div>

    <div id="login_panel" class="col-lg-3 center modal-content">

    <form>
    <fieldset>
        <legend>Login</legend>

        <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control form-inline" placeholder="Enter username">
        </div>

        <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Enter password">
        </div>

        <div class="form-group">
        <button type="button" class="btn btn-primary">Login</button>
        <button type="button" class="btn btn-default">Reset</button>
        <button type="button" class="btn btn-link">Forgot password?</button>
        </div>


    </fieldset>
    </form>

    </div><!--login_panel-->

</div>


</body>
</html>

【问题讨论】：

style.css 中的所有样式都有哪些？创建一个小提琴
jsfiddle.net/gpKLz .center 类用于使元素居中。

标签： html css internet-explorer-8 twitter-bootstrap-3

【解决方案1】：

<style>
body
{
    background-color:#f2f2f2;
    overflow-x:  hidden;
}
.center
{
    float: none; 
    margin-left: auto;
    margin-right: auto;
}
</style>

试试这个。

【讨论】：

溢出-x：隐藏；
不会有任何问题。
解决了滚动条问题，还在等待IE8问题的解决方案。

【解决方案2】：

您是否尝试在 css 中为滚动条问题提供相对宽度而不是绝对宽度？

这是一个很好的article。

【讨论】：

【解决方案3】：

是的，您应该尝试将您的课程换成较低版本的课程

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script type="text/javascript">
    $(".col-lg-3).addClass("col-md-3").addClass("col-xs-3");
    $(".col-lg-4).addClass("col-md-4").addClass("col-xs-4");
</script>
<![endif]-->

我做了类似的事情，但我从 col-md-10 更改为 col-md-9。我理解它的方式是屏幕缩小超过某个像素宽度（我相信@media 包含此值） col-lg-4 下降到 col-md-8 然后下降到 col-xs-12，但如果你指定什么您希望它的宽度随着屏幕变小而与屏幕相关。您应该看到您的元素的外观大致相同。

【讨论】：