IE игнорирует стили для динамически загружаемого содержимого

Я видел пару подобных вопросов здесь без реальных ответов. Надеюсь, кто-то замечает это...

IE 8 и ниже отказываются применять стили из таблицы стилей CSS, определенной в заголовке, когда они загружаются в вызов jQuery document.ready.

Параноидальный клиент хочет, чтобы NOBODY отображал код или сайт-разработчик, поэтому я должен привести короткий пример. Клиент хочет, чтобы сайт отображал только соответствующую часть HTML на почти исключительно "аяксированном" сайте. Итак, сайт подобен сетке. Если вы загрузите главную страницу, вы получите следующее:

<div id="content">
    <section id="home">
        <h1>Title</h1>
        <p>Hi There!</p>
    </section>
</div>

Затем onload я использую jquery для отображения окружающих страниц...

$(document).ready(function(){
    $('#content').append('<section id="about"><h1>About Us</h1></section>');
});

IE может справиться с этим много, но когда дело доходит до уважения к моему тщательно построенному CSS, он просто игнорирует стили и смеется над мной.

Сайт полностью расположен с абсолютным позиционированием, тоннами z-индексации и ужасающим количеством анимации jquery. То, что вы не хотите заново воссоздать каким-то дополнительным глупым способом для какого-то более низкого, но в основном используемого браузера. Дорогой бог, скажи, пожалуйста, кто-то выяснил, как заставить IE уважать определенные стили на элементах, созданных после загрузки.

Есть ли у вас какие-либо идеи?

  • Я знаю, что куски реального кода предпочтительнее, но это кратким и говорит вам достаточно, не имея полного аудита. Даже если только определенный стиль - #about {display: none; } он игнорируется. Раздел about написан в соответствии с запросом, но по умолчанию он является блоком отображения.

  • Я также знаю, что это не технически ajaxing, но я использую технический жаргон, чтобы попытаться прояснить порядок загрузки страницы, поскольку он не является стандартным загруженным html.

РЕШЕНИЕ

$('#content').append($('<section>').attr('id', 'about').html('<h1>About Us</h1><p>some text</p>'));

Правильно применяет элемент, а также css для этого и всех детей. Не уверен, что IE в IE, не будучи объявленным одинаковым образом, корректно читаются вложенными элементами, но я определенно благодарен. Спасибо jfriend00 и всем, кто помог.

Ответы

Ответ 1

Проблема в том, что эта строка кода не генерирует желаемый набор объектов HTML в IE7/IE8:

$('#content').append('<section id="about"><h1>About Us</h1></section>');

Если вы посмотрите в инспекторе IE DOM, вы не увидите нужные теги вложенными, чтобы DOM был испорчен, и поэтому правила стиля не работают должным образом. Проблема заключается в том, как вещи вставляются в DOM с помощью jQuery. Я думаю, что проблема взаимодействия с jQuery с IE больше всего на свете.

Не углубляясь в код подробно в IE, я не могу сказать, действительно ли это проблема jQuery или проблема IE или только одна из тех перегруженных комбо-ошибок. Очевидно, что IE заслужил право первой вины за предыдущие нарушения, но, вероятно, лучше просто избежать этой ошибки, используя более простой код.

Немного сократив код, этот код работает для меня в IE7: здесь мы создаем один тег, добавляем к нему некоторый innerHTML, а затем вставляем этот корневой тег, используя append(), а не добавляем HTML для добавления.

$(document).ready(function() { 
    var section = $("<section>");
    section.attr("id", "about");
    section.html('<h1>About Us</h1>');
    $('#content').append(section);
});

Здесь вы можете увидеть, как работает исправленный код: http://jsfiddle.net/jfriend00/vEST8/

Я не знаю, почему у IE возникает проблема с добавлением целой строки HTML непосредственно через jQuery, но я видел эту проблему раньше.

Ответ 2

Чтобы быть в безопасности, используйте jQuery для применения указанных классов после добавления:

$('#content').append('<section id="about"><h1>About Us</h1></section>');
$("#about").addClass("foo");