IE会忽略动态加载内容的样式

Question

我在这里看到了几个类似的问题，但没有真正的答案。希望有人注意到这一点…

IE 8及更低版本在将它们加载到document.ready jquery调用中时，拒绝应用标题中定义的css样式表中的样式。

偏执的客户希望NOBODY可以查看代码或开发站点，因此我必须举一个简短的示例。客户希望该站点仅在几乎唯一的“
ajaxed”站点上呈现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-
indexing和大量的jquery动画定位。对于某些劣等但仍占主导地位的浏览器，您不想以某种额外的愚蠢方式重新创建。亲爱的上帝，请告诉我，有人找到了一种使IE尊重加载后创建的元素上已定义样式的方法。

有什么想法吗？

• 我知道最好使用真实代码块，但这很简洁，可以告诉您足够的信息，而无需进行全面的审核。即使唯一定义的样式是#about {display：none; }它被忽略。关于部分按要求编写，但默认情况下为显示块。

• 我也知道这从技术上讲不是令人讨厌的，但是我使用技术行话来试图阐明页面加载的顺序，因为它不是标准加载的html。

解决方案

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

对此元素和所有子元素正确应用元素以及CSS。不知道为什么IE可以正确读取嵌套元素而不必以相同的方式声明，但是我绝对感激。感谢jfriend00和其他提供帮助的人。

Answer 1

问题是这一行代码无法在IE7 / IE8中生成所需的HTML对象集：

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

如果您在IE
DOM检查器中查看，则看不到所需的标签正确嵌套，从而使DOM混乱，因此样式规则无法正常工作。问题是jQuery如何将事物插入DOM。我认为这是IE的jQuery交互问题，而不是其他任何问题。

如果不详细浏览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在直接通过jQuery附加整个HTML字符串时会遇到问题，但是我之前已经看到过这个问题。