javascript - 使用 Internet Explorer 8 进行媒体查询

Question

我正在尝试使媒体查询在 IE8 上工作(因为我的公司使用它，我知道很难过。)而且我已经找到了像 respond.js 这样的东西。令人恼火的是，当我使用此链接时:http://scottjehl.github.io/Respond/test/test.html在 IE8 上，它工作得很好......但是!当我下载最新版本的 respond.js 并尝试启动这个完全相同的 test.html 页面时，它不起作用!我没有编辑任何东西，甚至 Scott Jehl 写的测试页也不起作用。在我发疯之前，请提供一些帮助。

:|

Answer 1

让我们在网上收集一些信息...

在 Bootstrap 的测试文件中 http://getbootstrap.com/getting-started/#template代码中有几行说:

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Drupal 页面在这里 https://www.drupal.org/node/2173441说:

Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

所以，让我们从一开始就我们应该在的地方...官方文档 :D Respond.js doc

...其中说，

Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark (BOM), they will not work with Respond.js in IE7 or IE8. Noted in issue #97

WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around this, place @font-face rules in the wide open, as a sibling to other media queries.

...因此，如果您对 respond.js 和 ie8 有疑问，请务必快速检查以上所有内容，当然，请阅读官方文档。

也值得一读:http://nextflow.in.th/en/keep-your-responsive-web-design-against-the-legendary-internet-explorer-ie6ie7ie8/using-response-js-to-make-ie6ie7ie8-understand-your-responsive-design/

Put response.js after all CSS you use in web page. Except you are ready for weird action.

Response.js has an issue with CDN & domain.