この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 で問題なく動作することがわかりましたが、トランジション (メディア クエリの読み取り) が 1 秒近く遅れていることに気付いたので、使用したくありません。それ。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>