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

Question

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

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

Параноидальный клиент хочет, чтобы НИКТО не видел код или сайт разработчика, поэтому я приведу короткий пример. Клиент хочет, чтобы сайт отображал только релевантную часть HTML на почти исключительно «ajaxed» сайте. Итак, сайт похож на сетку. Если вы загрузите домашнюю страницу, вы получите это:

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

Затем при загрузке я использую 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 без необходимости объявления таким же образом, но я определенно благодарен. Спасибо jfriend00 и всем, кто помог.

Answer 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, но я видел эту проблему раньше.

Answer 2

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

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