IE8和Respond.js-包含的动态CSS不适用

Question

I'm having some trouble with IE8 recognising some CSS that is generated from a PHP file and then included in my sites header. IE8遇到一些麻烦，无法识别从PHP文件生成的一些CSS，然后将其包含在我的站点标题中。 This CSS works perfectly in all other browsers I've tested but it simply won't apply in IE8. 该CSS可以在我测试过的所有其他浏览器中完美运行，但根本不会在IE8中应用。

If I move the dynamic CSS into my main css files - it works fine. 如果我将动态CSS移到我的主要CSS文件中，则效果很好。

By dynamic, I mean the the CSS is generated from PHP. 动态是指CSS是从PHP生成的。 I'm already using respond.js to enable media queries in IE8 which is working because if I put this CSS in my main file - the CSS works. 我已经在使用response.js来启用IE8中的媒体查询了，因为它可以正常工作，因为如果我将此CSS放在我的主文件中-CSS可以工作。

However, if I put non-media query styles in the same file - it does apply. 但是，如果我将非媒体查询样式放在同一文件中，则确实适用。 So this must be an issue with respond.js not seeing that responsive CSS. 所以这一定是一个问题，response.js没有看到响应式CSS。

When I 'View Source' the file has definitely included as it's printed in there but for some reason IE8 won't apply the styles. 当我“查看源代码”时，文件肯定已经包含在其中，因为它在那里打印，但是由于某些原因，IE8不会应用这些样式。 It doesn't show in Developer Tools. 它不会显示在开发人员工具中。

Basically, the CSS should display a black menu bar at the top of the page when the browser window is narrower than 782 pixels. 基本上，当浏览器窗口的宽度小于782像素时，CSS应该在页面顶部显示一个黑色的菜单栏。

You can see the full thing at: http://sandbox.benpalmer.me/flow/test/ 您可以在以下位置查看完整内容： http : //sandbox.benpalmer.me/flow/test/

The head of my document looks like this (this is a Wordpress theme/template): 我的文档的标题如下所示（这是一个Wordpress主题/模板）：

<!doctype html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="<?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <!--<![endif]-->

<head>

<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title><?php wp_title( '|', true, 'right' ) . bloginfo('name'); ?></title>

<meta name="viewport" content="width=device-width, initial-scale=1"> <?php

wp_head();

include(locate_template('assets/css/dynamic.css.php')); ?>

<!--[if lt IE 9]> <?php
    if($theme_settings['modernizr-version'] == 'none'): ?><script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/modernizr.min.js"></script><?php endif; ?>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/selectivzr.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/respond.js"></script>
<![endif]-->

</head>

<body <?php body_class(); ?>>

The include(locate_template('assets/css/dynamic.css.php')); 的include(locate_template('assets/css/dynamic.css.php')); file that is being included is set up like this: 包含的文件是这样设置的：

<?php

/*
| --------------------------------------------------------------------
| Primary Navigation
| --------------------------------------------------------------------
*/

/* Breakpoint
| -------------------------------------------------------------------- */ ?>

<style type="text/css">

@media all and (max-width: <?php echo get_theme_mod('nav-primary-breakpoint', '782px'); ?>) {

    #wrapper {
        margin-top: 42px;
    }

    .admin-bar #wrapper {
        margin-top: 88px;
    }

    #mobile-header {
        display: block;
    }

    #menu-primary {
        display: none;
    }

    .drawer {
        margin-top: 42px;
        padding-top: 42px;
        top: -42px;
    }

}
</style>

This one has me stumped - I've been Googling for an hour which brought up suggestions of changing my DOCTYPE, making sure my comments are ended properly etc but nothing has worked so far. 这让我感到难过-我已经搜寻了一个小时，提出了有关更改DOCTYPE的建议，请确保我的评论正确结束等，但到目前为止没有任何效果。

Answer 1

I suppose that by "dynamic CSS" you mean CSS media queries . 我想用“动态CSS”来表示CSS媒体查询。 If so, the answer is very simple: 如果是这样，答案很简单：

IE8 does not support media queries. IE8不支持媒体查询。

There are some JS polyfills that solve the issue, the most famous one is perhaps respond.js . 有一些JS polyfills解决了这个问题，最著名的也许是response.js 。

EDIT 编辑

From the discussion in comments: It seems that the issue is caused by the fact, that Respond.js can read CSS from linked stylesheets only , not from inlined CSS. 从评论中的讨论中：问题似乎是由以下事实引起的：Respond.js 只能从链接的样式表读取CSS ，而不能从内联的CSS 读取 CSS。

IE8和Respond.js-包含的动态CSS不适用

问题描述

1 个解决方案

解决方案1
0 2014-05-09 09:20:06

EDIT 编辑

IE8和Respond.js-包含的动态CSS不适用

问题描述

1 个解决方案

解决方案1 0 2014-05-09 09:20:06

EDIT 编辑

解决方案1
0 2014-05-09 09:20:06