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

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

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

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

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

10
задан Kai Qing 29 September 2011 в 00:44
поделиться