BootStrap3 在IE8下的兼容性问题
2014-10-15 09:20
246 查看
最近刚开始看BootStrap3
发现在IE8下有不兼容现象，上网查了一下，解决方法如下：
1 声明meta
<meta http-equiv="X-UA-Compatible" content="IE=edge">（
2 添加Respond.min.js
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
3 网上没查到我的这种情况，如果有请参考
引用Bootstrap.min.css文件时，将文件保存到本地再引用。我最开始引用的是，但在IE8下显示效果不兼容，但引用本地的Bootstrap文件就没有问题。
附代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Narrow Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="http://bootstrap.evget.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
</head>
<body>
<div class="container">
<div class="col-lg-2 text-right">
<input type="button" value="Success Button" class="btn btn-success"/>
</div>
<div class="col-lg-4 text-left">
<input type="text" class="form-control"/>
</div>
<div class="col-lg-4 text-right">
<input type="password" class="form-control"/>
</div>
<div class="col-lg-2 text-left">
<input type="button" value="Default Button" class="btn btn-default"/>
</div>
</div> <!-- /container -->
<script type="text/javascript" src="dist/js/jquery.min.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
发现在IE8下有不兼容现象，上网查了一下，解决方法如下：
1 声明meta
<meta http-equiv="X-UA-Compatible" content="IE=edge">（
IE=edge表示强制使用IE最新内核）
2 添加Respond.min.js
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
3 网上没查到我的这种情况，如果有请参考
引用Bootstrap.min.css文件时，将文件保存到本地再引用。我最开始引用的是，但在IE8下显示效果不兼容，但引用本地的Bootstrap文件就没有问题。
附代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Narrow Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="http://bootstrap.evget.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
</head>
<body>
<div class="container">
<div class="col-lg-2 text-right">
<input type="button" value="Success Button" class="btn btn-success"/>
</div>
<div class="col-lg-4 text-left">
<input type="text" class="form-control"/>
</div>
<div class="col-lg-4 text-right">
<input type="password" class="form-control"/>
</div>
<div class="col-lg-2 text-left">
<input type="button" value="Default Button" class="btn btn-default"/>
</div>
</div> <!-- /container -->
<script type="text/javascript" src="dist/js/jquery.min.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于bootstrap IE8的兼容性问题
- 【兼容性】Bootstrap模态框在IE8兼容性问题
- IE8 和Visual studio 2008脚本兼容性问题
- CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案
- IE6、 IE7、IE8、Firefox兼容性问题
- IE7和IE8的兼容性问题
- 解决DIV+CSS设计在IE6/IE7/IE8/火狐-兼容性问题
- CSS HACK]IE6、IE7、IE8、Firefox兼容性问题
- IE6、 IE7、IE8、Firefox兼容性问题
- VS2005与IE8兼容性问题
- IE6、IE7、IE8、Firefox兼容性问题
- 一段JS调用解决IE6-IE8的兼容性问题，太神奇了！
- [CSS HACK]IE6、IE7、IE8、Firefox兼容性问题
- CSS HACK IE6，IE7，IE8，Firefox 兼容性问题
- qc9.0与IE8兼容性问题
- IE8 兼容性问题（属性名区分大小写）
- [CSS HACK]IE6、IE7、IE8、Firefox兼容性问题
- IE7 IE8 的兼容性问题解决（微软）
- Css兼容性问题 CSS hack:区分IE6，IE7，IE8，firefox
- 解决ie8兼容性问题（方法总结）