Respond.js 和 Modernizr 无法在 IE8 上进行媒体查询答案

【问题标题】：Respond.js and Modernizr not working on IE8 for media queriesRespond.js 和 Modernizr 无法在 IE8 上进行媒体查询
【发布时间】：2012-11-09 14:47:13
【问题描述】：

我有一个博客，我正在尝试使用引导程序作为项目的主干在所有浏览器上工作。我正在使用 Modernizr 和 Respond 来强制 IE 响应媒体查询，但由于某种原因脚本无法正常工作。我是按错误的顺序放置它们还是另一个 JS 脚本覆盖了它们？任何帮助将不胜感激。

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/bootstrap-responsive.min.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:700' rel='stylesheet' type='text/css'>
<script src="<?php echo get_template_directory_uri(); ?>/library/js/modernizr.full.min.js"></script>
<script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>          
    <!-- HTML Shim - Enables usage of all HTML5 elements in Internet Explorer -->
    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write(unescape('%3Cscript src="<?php echo get_template_directory_uri(); ?>/library/js/libs/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>

    <!-- Selectivizr - Enable CSS3 selectors for IE 6-8 -->
    <!--[if (gte IE 6)&(lte IE 8)]>
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/libs/selectivizr-min.js"></script>
    <![endif]-->
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/bootstrap-tooltip.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/bootstrap-popover.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/bootstrap-typeahead.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/site.js"></script>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    <!-- wordpress head functions -->
    <?php wp_head(); ?>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

【问题讨论】：

嘿，你解决过这个问题吗？似乎下面的一些答案 - 结合起来 - 是一个答案。您能告诉我们进展如何，以便我们从您的经验中学习吗？据我所知，有3个问题。 1.) 源顺序。 2.) 在@media 规则中添加“仅屏幕和”，-和 3.) 嵌套和 SASS 可能存在的问题。任何见解都会很棒。

标签： jquery modernizr polyfills

【解决方案1】：

尝试移动

<script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>

查看您的最后一个样式表链接（您可能错过了它，但底部有一个）。

【讨论】：

【解决方案2】：

仅添加 respond.js 并不能修复媒体查询。我使用 css3-mediaqueries.js 并像这样编写媒体查询：

    @media screen and (min-width: 768px) and (max-width: 979px) {
      // css;
    }

代替：

    @media (min-width: 768px) and (max-width: 979px) {
      // css;
    }

【讨论】：

【解决方案3】：

同样的问题。我发现这是我的加载顺序问题，因为我先内联编写 CSS，所以它看起来像

<script type="text/javascript" src="js/respond.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

应该是

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

总是在脚本之前调用样式表！

【讨论】：