Question

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

IE 8及以下版本在文档.ready jquery调用中加载时，拒绝应用标题中定义的css样式表中的样式。

Paranoid客户端希望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;它被忽略了。 about部分按要求编写，但默认为显示块。
我也知道这在技术上并不是ajaxing，但我正在使用技术术语试图澄清页面加载的顺序，因为它不是标准加载的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字符串有问题，但我之前看到过这个问题。

Answer 2

为安全起见，请使用jQuery在追加后应用所述类：

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

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

2 个答案: