我在 IE8 识别一些从 PHP 文件生成然后包含在我的站点 header 中的 CSS 时遇到了一些问题。此 CSS 在我测试过的所有其他浏览器中都能完美运行，但它根本不适用于 IE8。
如果我将动态 CSS 移动到我的主 css 文件中 - 它工作正常。
所谓动态，是指 CSS 是从 PHP 生成的。我已经在 IE8 中使用 respond.js 启用媒体查询，这是有效的，因为如果我将此 CSS 放在我的主文件中 - CSS 有效。
但是，如果我将非媒体查询样式放在同一个文件中 - 它确实适用。所以这一定是 respond.js 没有看到响应式 CSS 的问题。
当我“查看源代码”时，文件确实包含在内，因为它打印在那里，但出于某种原因 IE8 不会应用这些样式。它不会显示在开发人员工具中。
基本上，当浏览器窗口小于 782 像素时，CSS 应该在页面顶部显示一个黑色菜单栏。
您可以在以下网址查看完整内容:http://sandbox.benpalmer.me/flow/test/
我的文档的头部看起来像这样(这是一个 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(); ?>>
被包含的 include(locate_template('assets/css/dynamic.css.php')); 文件是这样设置的:
<?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>
这让我很困惑 - 我已经谷歌搜索了一个小时，它提出了更改我的 DOCTYPE 的建议，确保我的评论正确结束等等，但到目前为止没有任何效果。
最佳答案
我想你所说的“动态 CSS”是指 CSS media queries .如果是这样，答案很简单:
IE8 does not support media queries.
有一些 JS polyfill 可以解决这个问题，最著名的可能是 respond.js .
编辑
从评论中的讨论来看:问题似乎是由以下事实引起的:Respond.js 只能从链接样式表中读取 CSS，而不能从内联 CSS 中读取。
关于php - IE8 和 Respond.js - 包含的动态 CSS 不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23560703/