小编典典

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

ajax

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

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和其他提供帮助的人。


阅读 228

收藏
2020-07-26

共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字符串时会遇到问题,但是我之前已经看到过这个问题。

2020-07-26