这个来自H5BP的响应性示例在Internet Explorer 7、Internet Explorer 8和Internet Explorer 9中运行良好,但是当我在自己的项目中使用H5BP时,它仅在Internet Explorer 7中不起作用。我还尝试省略H5BP并使用纯粹的html5shiv + response .js(也使用selectivzr.js),但我遇到了同样的问题(它不适用于internetexplorer7)。我看不到任何JavaScript/console错误。
尝试css3-mediaqueries.js我发现它在Internet Explorer 7, Internet Explorer 8和Internet Explorer 9上运行良好,但我注意到过渡(阅读媒体查询)延迟了几乎一秒钟,所以我不想使用它。
我已经在response .js页面上阅读了"跨域/CDN问题",我的测试项目是在子域根(例如,子域[。]mydomain[。]tld/),所以如果这是问题,为什么它在Internet Explorer 8和Internet Explorer 9上工作得很好,而不是在Internet Explorer 7?
在Internet Explorer 7中不工作意味着仅在Internet Explorer 7中列没有折叠,媒体查询无法读取。
我已经下载了html5shiv.js和response .js的initializr响应演示,它在我的子域上工作得很好,所以"跨域/CDN问题"不是问题:/
在Internet Explorer中,我已经禁用了"启用保护模式",现在它可以工作了。但是,尽管启用了此安全设置,为什么在线示例(H5BP和initializr)仍然可以工作?
这是我做的最后一个测试的HEAD:
<!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>
SOLVED
IE7中的问题是标签"base",正如你在这个例子中看到的,我添加到H5BP模板响应标签"base",现在不再适用于IE7。这就是为什么它不能在IE7上工作。
Respond.js GitHub问题#1
Respond.js GitHub问题#2 (https://github[dot]com/scottjehl/Respond/issues/137)
一个GitHub用户的测试页面的解释和修复(http://webdesign[dot]web3.lu/mediaqueries_polyfill.html)
对于所有想知道为什么HPBP不应该工作的人来说,这只是一件小事。因为找不到更好的词。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
它使浏览器使用最好的渲染引擎,即IE10。如果你使用的是IE,比如说10,并且只是在开发工具中更改渲染模式,只需将其注释出来以供测试。