IE8 メディア クエリと CSS3 プロパティのサポートに Respond.js と Selectivizr を使用しています。残念ながら、それはこの有名な死の白い画面を引き起こします...
selectivizr スクリプトを削除すると、正常に動作します。stackoverflow を検索したところ、うまくいかない回避策がいくつか見つかりました。
私が試したこと：
- Respond.js の前に Selectivizr をロードする
- 両方のライブラリを最新バージョンに更新しました
- 他のライブラリ/プラグインを削除する
<meta http-equiv="X-UA-Compatible" content="IE=8" />
私が使用しているもの：
- jQuery
- Respond.js
- 選択的
- モダニズム
- Require.js
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7 no-js"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 no-js"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 no-js"> <![endif]-->
<!--[if IE 9]> <html class="ie9 no-js"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<title><?php echo $portal_name . " " . $pageTitle; ?></title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-ipad-retina.png" />
<link rel="stylesheet" href="/css/<?php echo $portal; ?>.css">
<script src="/js/vendor/modernizr.custom.min.js"></script>
<script src="/js/vendor/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// add specific class to html when windows
if (navigator.appVersion.indexOf("Win")!=-1){
$('html').addClass('win');
}
// add specific class to html when chrome
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
$('html').addClass('chrome');
}
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/plugins/jquery.selectivizr.min.js"></script>
<script type="text/javascript" src="/js/vendor/respond.min.js"></script>
<![endif]-->
<script async data-main="/js/app" src="/js/vendor/require.min.js"></script>
</head>
これを解決する方法はありますか？