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

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>

Answers


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)


Need Your Help

Where to start with QuickBooks development?

c# .net quickbooks

Does QuickBooks allow people to develop custom modules for their software? If so, are there any good resources out there for getting started with QuickBooks development?

Use an intent to send data to my activity

android service android-activity android-intent

I have a server running that notifies the user with a statusbar notification that opens my main activity, how can I pass data to my activity trough that intent?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.