Respond.js无法在Internet Explorer 7中运行，但H5BP示例有效 [英] Respond.js not working in Internet Explorer 7, but H5BP example works
问题描述
来自 H5BP 的响应示例在Internet Explorer 7，Internet Explorer 8中运行良好和Internet Explorer 9，但是当我在自己的项目中使用H5BP时，它只能在Internet Explorer 7中使用。我也尝试省略H5BP并使用纯粹的html5shiv + Respond.js（也使用selectivzr.js），但我遇到了同样的问题（它在Internet上无法使用 Explorer 7）。而且我看不到任何JavaScript /控制台错误。
This responsive example from H5BP works well in Internet Explorer 7, Internet Explorer 8 and Internet Explorer 9, but when I use H5BP in my own project, it doesn't work in Internet Explorer 7 only. I've also tried omitting H5BP and using purely html5shiv + Respond.js (also with selectivzr.js), but I encounter the same issue (it does not work in Internet Explorer 7). And I cannot see any JavaScript/console error.
尝试 css3-mediaqueries.js 我发现在Internet上运行良好 Explorer 7， Internet Explorer 8和Internet Explorer 9，但我注意到转换（读取媒体查询）延迟了几秒钟，所以我不想使用它。 Respond.js要快得多。
Trying css3-mediaqueries.js I found that works well on Internet Explorer 7, Internet Explorer 8 and Internet Explorer 9, but I noticed that the transition (reading media queries) is delayed by almost a second, so I don't want to use it. Respond.js is much faster.
我在 respond.js页面，我的测试项目位于子域根目录（例如，子域[dot] mydomain [dot] tld /），所以如果这是问题为什么它在互联网 资源管理器 8和Internet 资源管理器9上运行良好但在互联网 资源管理器 7？
I've read the "cross-domain/CDN issue" on the respond.js page and my test project is in a subdomain root (for example, subdomain[dot]mydomain[dot]tld/), so if this is the problem why does it work well on Internet Explorer 8 and Internet Explorer 9 but not in Internet Explorer 7?
不在Internet上工作 资源管理器 7表示如果列没有在互联网资源管理器中折叠，则不会读取媒体查询。
Not working in Internet Explorer 7 means that the columns aren't collapsing in Internet Explorer 7 only, media queries are not read.
我已经使用html5shiv.js下载了初始化响应式演示并回复.js并且它在我的子域名上运行良好，所以跨域/ CDN问题不是问题：/
I've downloaded the initializr responsive demo with html5shiv.js and respond.js and it works well on my subdomain, so "cross-domain/CDN issue" is not the problem :/
在Internet Explorer中，我已禁用 启用受保护模式，现在可以使用了。 但是为什么在启用此安全设置的情况下，在线示例（H5BP和initializr）可以正常工作？
In Internet Explorer, I've disabled "Enable protected mode", and now it works. But why do the online examples (H5BP and initializr), despite this security setting being enabled, work?
这是我上次测试的HEAD：
This is the HEAD of the last test I made:
<!DOCTYPE html>
<html dir="ltr" lang="it">
<head>
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400italic,700italic,300italic,300&subset=latin,latin-ext,greek-ext,greek" rel="stylesheet" type="text/css" />
<meta charset="<?php echo $charset; ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><?php echo $cur_title; ?></title>
<meta name="<?php echo $cur_desc; ?>" />
<link rel="canonical" href="<?php echo $cur_canonical; ?>" />
<meta name="author" content="<?php echo $author; ?>" />
<base href="<?php echo $cur_base; ?>" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="shortcut icon" href="apple-touch-icon-57x57.png" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<!--[if lt IE 9]>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="js/jquery.quicksearch.js"></script>
<script type="text/javascript">var base = '<?php echo $base; ?>';</script>
<script type="text/javascript">var isMobile = <?php echo $isMobile; ?>;</script>
<script type="text/javascript" src="js/common.js<?php echo '?'.time(); ?>"></script>
</head>
推荐答案
已解决
IE7中的问题是标签 base ，您可以在这个示例，我添加到H5BP模板，响应标签 base ，现在不再适用于IE7。
这就是为什么它不适用于IE7。
The problem in IE7 is the tag "base", as you can see in this example, I added to the H5BP template responsive the tag "base" and now no longer works on IE7. So that's why it does not work on IE7.
Respond.js GitHub问题＃2（https：// github [dot] com / scottjehl / Respond / issues / 137）
Respond.js GitHub issues #2 (https://github[dot]com/scottjehl/Respond/issues/137)
GitHub用户的测试页面，包含解释和修复（http：// webdesign [dot] web3.lu/mediaqueries_polyfill.html）
A GitHub user's test page with explanation and fixes (http://webdesign[dot]web3.lu/mediaqueries_polyfill.html)
这篇关于Respond.js无法在Internet Explorer 7中运行，但H5BP示例有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
