0

这个来自H5BP的响应式示例在 Internet Explorer 7、Internet Explorer 8 和 Internet Explorer 9 中运行良好，但是当我在自己的项目中使用 H5BP 时，它仅在 Internet Explorer 7 中不起作用。我也尝试省略 H5BP 并使用纯 html5shiv + Respond.js（也与 selectivzr.js），但我遇到了同样的问题（它在 Internet Explorer 7 中不起作用）。而且我看不到任何 JavaScript/控制台错误。

尝试css3-mediaqueries.js我发现它在 Internet Explorer 7、Internet Explorer 8 和 Internet Explorer 9 上运行良好，但我注意到转换（读取媒体查询）延迟了将近一秒，所以我不想使用它。Respond.js 要快得多。

我已经阅读了respond.js 页面上的“跨域/CDN 问题”，并且我的测试项目位于子域根目录中（例如，subdomain[dot]mydomain[dot]tld/），所以如果这是问题所在为什么它在 Internet Explorer 8 和 Internet Explorer 9 上运行良好，而在 Internet Explorer 7 上却不行？

在 Internet Explorer 7 中不起作用意味着这些列仅在 Internet Explorer 7 中不折叠，不读取媒体查询。

我已经下载了带有 html5shiv.js 和 respond.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>
4

2 回答 2

3

解决了

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)

于 2013-05-06T20:38:55.697 回答
0

对于所有想知道为什么 HPBP 只是在“不应该”时才起作用的一件小事……因为缺乏更好的术语。

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

它使浏览器使用可用的最佳渲染引擎，即 IE10。如果您使用 IE 说 10，并且只需在开发工具中更改渲染模式，只需将其注释掉以进行测试。

于 2013-06-03T18:07:10.123 回答