Bootstrap 3問題IE8

這個問題已經被別人問過了，我嘗試了那裏的建議，但沒有成功。 Link Bootstrap 3問題IE8

所以這裏是我的問題，我使用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>

來源

2013-08-21 Sharath Daniel

style.css中有哪些樣式？創建一個小提琴 –

http://jsfiddle.net/gpKLz/ .center類用於居中一個元素。 –

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

試試這個。

來源

2013-08-21 05:25:26

overflow-x：hidden; <---這有助於隱藏滾動條，但會導致任何其他元素的問題？ –

它不會產生任何問題。 –

這解決了滾動條問題，仍然在等待IE8問題的解決方案。 –

你嘗試給相對寬度，而不是絕對的人在你的CSS的滾動條問題？

這是一個很好的article在相同的。

來源

2013-08-21 05:22:24 Vandesh

是的，你應該嘗試在較低版本換掉類

<!--[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，如果指定了什麼你希望這個寬度與屏幕相關，因爲它越來越小。你應該看到你的元素大致相同。

來源

2014-03-31 19:00:03 DeadlyChambers

Bootstrap 3問題IE8

回答

相關問題