Twitter-Bootstrap respond.js不适用于IE8

问题描述：

我仍然有一些问题让我的Twitter-Bootstrap页面在IE8中正确显示桌面视图。我一直在这里跟着几个主题，但是投票建议只是对我没有帮助。Twitter-Bootstrap respond.js不适用于IE8

使用建议的meta标签

<meta http-equiv="X-UA-Compatible" content="IE=edge">

包括bootstrap.css的本地版本，html5shiv.js，respond.js，IE8响应文件，warning.js

这里是我的头节：

<!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 &ndash; 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]-->

而且它的结束：

<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>

参阅此http包括jQuery的：/ /*.com/questions/15127040/respond-js-not-working-in-ie-8它会帮助你 – 2dar

@ 2dar该答案似乎不适用于此代码。 – Blazemonger

我回顾了上面建议的*线程。这里列出的项目似乎都没有帮助。 –

答

我看到你在一个地方使用“dis/js/...”，在其他地方使用“dist/js /”。你确定你的路径是正确的吗？我会仔细检查浏览器实际上是否加载了您认为其加载的文件。

，或者它可能是有条件的意见复制，尝试一下本作笑容：（当然固定在下面的代码路径太多，如果“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]-->

我m也不熟悉ie8-responsive-file-warning.js，我会尝试删除，如果一切都不能确保它不与respond.js冲突。为此，请删除html5shiv以排除所有冲突。

dist/js/html5shiv.js和dist/js/respond.js是正确的目录。我已经检查了浏览器中的完整路径，并提取了文件内容。我按照建议删除了ie8-responsive-file-warning.js，但仍得到相同的结果。（http://skmgroupwork.com/suntrust/email/stac307b/indexhover.html） –

答

嗯，我已经问了几个人，并在此读了很多，但仍然没有回答。似乎修复它的唯一方法就是调用IE8样式表来正确显示内容。

事件getbootstrap.com示例在IE8中不起作用，它们都以与IE8中移动相同的方式堆叠。

真的很遗憾，因为我无法在大多数项目中使用它。

这表明您的IE8安装存在问题。所有的例子都适用于IE8。 –

你是说你在IE8中看到3列的项目，那些标题和按钮在一行中相邻？彼此不堆叠？我仍然看到他们堆放，这不是我想要的。 getbootstrap.com示例还有3列项目。 –

是，例如http://getbootstrap.com/examples/jumbotron/和http://getbootstrap.com/examples/offcanvas/正常工作。 –

答

尝试使用bootstrap的本地副本。这解决了我与IE8的问题。

哥们你省了我很多时间，谢谢！ :) –

不客气。您需要启动本地副本的原因是因为respond.js无法分析远程css资产。 – bwaaaaaa

答

我们发现，在“head”部分之外有css链接（主要是为了引导css）打破了respond.js根据需要提供必要的媒体查询支持的能力。确保你所有的CSS链接都在你的“头”部分。

答

始终确保在加载jQuery后加载以下脚本。

特别是在WordPress和其他框架有些人往往刚刚结束标记之前，因此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]-->

Twitter-Bootstrap respond.js不适用于IE8

相关推荐