Question

其他人已经问过这个问题，我在那里尝试了一些建议，但结果并没有成功。 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>

Answer 1

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

这是一个很好的article。

Answer 2

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

试试这个。

Answer 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，如果你指定了什么你希望它的宽度随着它变小而与屏幕有关。您应该看到元素的外观相同。

IE8的Bootstrap 3问题

3 个答案: