Twitter-Bootstrap respond.js不适用于IE8
[英]Twitter-Bootstrap respond.js not working for IE8
问题描述
I'm still having some problems getting my Twitter-Bootstrap page to display the desktop view correctly in IE8. 
我仍然遇到一些问题，让我的Twitter-Bootstrap页面在IE8中正确显示桌面视图。 I've been following a few threads here but the voted up advice is just not working for me. 我一直在这里关注一些线索，但投票的建议对我不起作用。
Using the suggested meta tag 使用建议的元标记
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Included local versions of bootstrap.css, html5shiv.js, respond.js, ie8-responsive-file-warning.js 包含本地版本的bootstrap.css，html5shiv.js，respond.js，ie8-responsive-file-warning.js
Here is my head section: 这是我的头部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SunTrust Equity Line Options">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title>SunTrust – Your Equity Line is Maturing. What are your options?</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="dis/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/respond.js"></script>
<![endif]-->
And the end of it: 结束了：
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault();
});
</script>
</body>
</html>
5 个解决方案
解决方案1
8 2014-04-21 11:54:14
Try using local copy of bootstrap. 尝试使用bootstrap的本地副本。 This solved my problem with IE8. 这解决了IE8的问题。
解决方案2
2 2014-01-15 14:01:26
Well I've asked several people and read a ton on this and still no answer on this. 好吧，我已经问了好几个人并且读了很多，但仍然没有答案。 Seems like the only way to fix it is to call an IE8 only style sheet to get things to display correctly. 似乎解决它的唯一方法是调用仅IE8样式表来正确显示内容。
Event the getbootstrap.com examples don't work in IE8 they all stack the same way mobile first in IE8. 事件getbootstrap.com示例在IE8中不起作用，它们在IE8中的移动优先级相同。
It's a shame really since I won't be able to use it for most projects. 真是太遗憾了，因为我无法在大多数项目中使用它。
解决方案3
2 2014-08-12 10:38:25
Always make sure that you load the following scripts after loading jQuery. 始终确保在加载jQuery 后加载以下脚本。
Especially in WordPress and other frameworks some people tend to include jQuery just before the closing tag and therefore after the html5shiv.js and respond.js script, which causes issues in IE8 特别是在WordPress和其他框架中，有些人倾向于在结束标记之前包含jQuery，因此在html5shiv.js和respond.js脚本之后，这会导致IE8中出现问题
<!-- Include first -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
解决方案4
1 2014-01-11 16:27:11
i see you are using "dis/js/..." in one place and "dist/js/" in other places. 我看到你在一个地方使用“dis / js / ...”而在其他地方使用“dist / js /”。 Are you sure your paths are correct? 你确定你的路径是正确的吗？ I would double check the browser is actually loading the files you think its loading. 我会仔细检查浏览器实际上是否正在加载您认为其加载的文件。
or it could be the duplication of conditional comments, try this for grins: (of course fix the paths in the below code too if "dis" or "dist" is incorrect) 或者它可能是条件注释的重复，尝试这个grins :(当然，如果“dis”或“dist”不正确，也修复下面代码中的路径）
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>
<script src="dis/js/ie8-responsive-file-warning.js"></script>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/respond.js"></script>
<![endif]-->
I'm also not familiar with ie8-responsive-file-warning.js, i would try removing that if all else fails to be sure its not conflicting with respond.js. 我也不熟悉ie8-responsive-file-warning.js，如果所有其他方法都无法确定它与respond.js没有冲突，我会尝试删除它。 For that matter remove html5shiv as well just to rule out all conflicts. 就此而言，删除html5shiv也只是为了排除所有冲突。
解决方案5
0 2014-06-24 14:32:57
We discovered that having css links outside of the "head" section (essentially that for the bootstrap css) broke respond.js's ability to provide the necessary media query support as required. 我们发现在“head”部分之外的css链接（基本上是用于bootstrap css）破坏了response.js能够根据需要提供必要的媒体查询支持。 Ensure that all your css links live within your "head" section. 确保所有css链接都在“head”部分中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.