У меня возникли проблемы с IE8, распознающим некоторый CSS, созданный из файла PHP, а затем включенный в заголовок моего сайта. Этот CSS отлично работает во всех других браузерах, которые я тестировал, но он просто не будет применяться в IE8.
Если я перемещаю динамический CSS в свои основные файлы CSS - он работает нормально.
Под динамическим я подразумеваю, что CSS генерируется из PHP. Я уже использую response.js для включения медиа-запросов в IE8, который работает, потому что, если я помещу этот CSS в свой основной файл, CSS сработает.
Однако если я поместил стили запросов, не относящиеся к мультимедиа, в тот же файл, они применяются. Так что это должно быть проблемой с response.js, который не видит этот отзывчивый CSS.
Когда я «Просмотр исходного кода», файл определенно включается, поскольку он напечатан там, но по какой-то причине IE8 не применяет стили. Не отображается в инструментах разработчика.
По сути, CSS должен отображать черную строку меню в верхней части страницы, когда окно браузера уже, чем 782 пикселя.
Вы можете увидеть полную информацию по адресу: 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, убедиться, что мои комментарии заканчиваются правильно и т. д., но пока ничего не сработало.
include(locate_template), состоит только из медиа-запроса, верно? Так что это будет работать где угодно, НО IE8 и ниже. 09.05.2014wp_enqueue_scriptfunction и добавьте хукwp_headпрямо перед концом тега<head>. 09.05.2014