Respond.js not working in Internet Explorer 7, but H5BP example works

StackOverflow https://stackoverflow.com/questions/16319167

Pregunta

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.

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.

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?

Not working in Internet Explorer 7 means that the columns aren't collapsing in Internet Explorer 7 only, media queries are not read.

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

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?

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>
¿Fue útil?

Solución

SOLVED

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 issues #1

Respond.js GitHub issues #2 (https://github[dot]com/scottjehl/Respond/issues/137)

A GitHub user's test page with explanation and fixes (http://webdesign[dot]web3.lu/mediaqueries_polyfill.html)

Otros consejos

Just a small thing for all wondering why HPBP just works when it "should not" .. for the lack of a better term.

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

It makes the browser use the best render engine available, i.e. IE10. If you are using IE say 10, and simply change the render mode in dev tools just comment that out for testing.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top