【发布时间】：2013-11-20 18:16:29
【问题描述】：
我将 Respond.js 和 Selectivizr 用于 IE8 媒体查询和 CSS3 属性支持。 不幸的是，它导致了这个著名的白屏死机......
删除 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>
有什么建议可以解决这个问题吗？
【问题讨论】：
-
不要使用与 IE8 不兼容的选择器。当然有花哨的选择器可以做任何事情，但实际上你可以通过一些额外的 DOM 工作和一些新类轻松地做任何你想做的事情。而且您不需要 javascript 库来加载您的页面。
-
真的吗？我应该停止使用因为 IE8 而为我们带来 CSS3 的令人敬畏的新东西吗？我不认为这是正确的方法..
-
不，您应该做的不是包含 selectivizr，而是应该包含另一个修复所有 CSS3 内容的 CSS 文件。如果您查看示例中的selectivizr.com，甚至还有一个备用css。加上用户代理嗅探是个坏主意，你使用 Modernizer 就坚持下去。
-
同意所有 ua 嗅探的东西都很糟糕，尤其是当你已经在加载 modernizr 时。
-
其他一些注意事项.... 1. 将
X-UA-Compatible设置为 IE8... 这绝对不会有任何帮助。事实上，如果有的话，对于较新的 IE 版本也会搞砸。 2. 如果您使用的是 Modernizr，则不需要 HTML5 Shim，因为 Modernizr 将整个 html5 shim 包含在其中。
标签： jquery internet-explorer-8 requirejs respond.js selectivizr