带有respond.js和html5shiv.js的Bootstrap 3仍然无法在IE8上运行

时间:2013-09-18 13:47:00

标签: internet-explorer-8 media-queries twitter-bootstrap-3 html5shiv respond.js

我有一个运行Bootstrap 3的网站,并且在除IE8之外的所有浏览器上都能正常运行。这是不支持媒体查询的问题,因此内容会像在移动设备上运行一样延伸。

我尝试过包含来自Google的respond.js,html5shiv.js和html5shim。还包括元http-equiv-tag。媒体查询似乎仍无效。

另外,我知道respond.js在本地不起作用,因为它是xmlHttpRequest-thingy,但是这个站点在web服务器上运行。

我还确保找到了respond.js和html5shiv.js并且链接没有被破坏。

有什么想法吗?

4 个答案:

答案 0 :(得分:3)

好的,所以没有响应的css文件并不是我们想要的。但是,我们发现了问题:

IE8似乎不喜欢@ import-property。

我们使用了导入必要样式的全局css文件。将所有样式表移动到标题并使用普通链接标记包含它们时,它可以正常工作。

虽然很奇怪,常规引导样式(按钮,背景等)已正确导入。网格系统不是。我猜Internet Explorer以神秘和迟钝的方式工作。

答案 1 :(得分:1)

我遇到了同样的问题。在我的情况下,QUIRKS模式搞砸了它。可以通过替换标准(建议的Bootstrap 3.0)强制IE进入Quirks模式:

<!DOCTYPE HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

答案 2 :(得分:1)

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

特别是在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]--> 

答案 3 :(得分:0)

<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">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
    </head>

如果你想尝试本地...尝试通过localhost,或创建一个QA服务器并设置内容并尝试。 我们需要response.js for bootstrap 3,如果我们只是将它放在js中并将其附加到标头中的html中,它就无法在本地机器上运行。 它会说拒绝访问。 它只能通过服务器工作,因为有安全限制。 :P