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

Question

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

IE 8及更低版本在文档.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; 它被忽略了.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字符串的问题,但我之前看到过这个问题.