Я динамически добавляю <link> элементов в голову, когда DOM готов.Тем не менее, я получаю противоречивые результаты в IE8 и IE7 (все остальные браузеры в порядке).
Каждые несколько раз страница загружается (кэшируется или не кэшируется), IE 7/8 отбрасывает несколько правил CSSв таблицах стилей. 1 или 2 из моих динамических таблиц стилей не будут загружаться.Это всегда те же 1 или 2 таблицы стилей, которые IE склонен игнорировать - , хотя панель инструментов разработчика показывает их как добавленные к голове! .
Сами таблицы стилей отображаются как <link> элементов в окончательном DOM, но некоторые из их правил не применяются (хотя каждые несколько перезагрузок они применяются, без каких-либо проблем).
В моем положении у меня нетроскошь написания кода из <head> (ограничение CMS) - я могу только динамически вставлять из тела, что может быть проблемой.
ОБНОВЛЕНО: Это код, который яиспользование (расположенное внутри <body>) для вставки таблиц стилей:
document.observe('dom:loaded', function() { // Using Prototype.js
// Add stylesheets
// addStylesheet('cite.css', 'head'); // Contains no webfont/@font-face rules
// addStylesheet('type.css', 'head'); // Contains webfont family name references*
// addStylesheet('flex.css', 'head'); // Responsive rules with @media queries
// addStylesheet('anm8.css', 'head'); // Some minor positional CSS for home page
// addStylesheet('gothic-cite.css', 'head'); // *Contains @font-face config
// addStylesheet('stag-cite.css', 'head'); // *Contains @font-face config
addStylesheet('all.css', 'head'); // Contains ALL content from above in 1 file
function addStylesheet(cssname, pos2)
{
var th2 = document.getElementsByTagName(pos2)[0];
var s2 = document.createElement('link');
s2.setAttribute('type', 'text/css');
s2.setAttribute('href', cssname);
s2.setAttribute('media', 'screen');
s2.setAttribute('rel', 'stylesheet');
th2.appendChild(s2);
}
});
Как и предполагалось, даже когда я объединил все правила в одну таблицу стилей (что я ненавижу делать), IE 7/8 продолжает работать вхолостуюкак описано с некоторыми правилами, и страница выглядит по-другому.
В качестве дополнительной проверки я также удалил все @font-face и ссылки font-family: "webfont-name" правил из таблиц стилей, и то же поведение продолжилось.Следовательно, мы можем исключить проблему с веб-шрифтами .
Вы можете увидеть аномалии, посетив следующую страницу с IE8 и обновив / нажав навигационную кнопку несколько раз.Кажется, совершенно случайно, когда IE8 отбрасывает эти стили.Однако на встроенной странице управления все стили загружаются правильно, каждый раз.
Live Page (с проблемами)
https://www.eiseverywhere.com/ehome/index.php?eventid=31648&tabid=50283
- PHP-на основе CMS печатает XHTML при загрузке страницы (содержимое шаблона смешано с пользовательским содержимым)
Prototype.js загружается и инициализируется по умолчанию при загрузке страницы - Собственная CMS
scripts.js файл анализируется назагрузка страницы - Мои скрипты запускаются при загрузке DOM, по существу заменяя
body.innerHTML CMS fluff-HTML только на нужный мне HTML, затем добавляет таблицы стилей в <head>. - Для
lte IE 8 плагины расширения CSS (selectivizr.js, html5.js и ie-media-query.js) загружаются в <body> с помощью условных комментариев.Не уверен, что они ждут DOM:loaded ... Редактор CMS WYSIWYG преобразует все возвраты каретки в пустые <p> теги , что приводит к таким элементам, как <section>содержится внутри неработающих тегов <p> и дополнительных тегов <p></p>, создаваемых там, где ожидается пробел.Однако только lt IE 8, кажется, душит это, поэтому я добавил следующие правила CSS, чтобы исправить это:
:not(.ie7) p { display: none; }
.ie7 p { display: inline; }
article p { display: block !important; }
Я должен заметить, что внешние таблицы стилей здесь извлекаются изодин и тот же домен, но каждый раз, когда они перезагружаются, для файла создается новый URL-адрес на основе MD5.Я не уверен, что предыдущие версии файла (или предыдущие файлы) по-прежнему доступны по их предыдущим URL-адресам.Это, вероятно, не является проблемой, поскольку вновь созданная таблица стилей all.css все еще отбрасывает правила, которые были в файле с самого начала.
Страница управления (работает без нареканий))
http://client.clevelanddesign.com/CD/IDG/CITE/home.html
- Чистый документ XHTML - без PHP.
- jQuery используется, а не Prototype, для IE8 и ниже.
- Все ресурсы (таблицы стилей) присутствуют в
<head> при загрузке страницы - без динамической вставки - Для
lte IE 8, плагинов расширения CSS (selectivizr.js, html5.js и ie-media-query.js)) изначально инициализируются.
Перефразированный вопрос:
Как вы думаете, какое из этих различий может привести к триггеру IE 7/8 в стилях при загрузке на страницу Live?Лично я подозреваю, что проблема связана с состоянием гонки, или что Prototype.js и другие скрипты CMS все портят (к сожалению, нет способа удалить их со страницы).
PS: я уже пытался использовать функцию IE createStylsheet(), но безрезультатно.
ОБНОВЛЕНИЕ - Скриншоты работы / не работы в IE8
IE8: код DOM при правильной загрузке:
IE8: код DOM, когда НЕ загружен правильно:
