IE浏览器会忽略样式动态加载的内容 [英] IE ignores styles for dynamically loaded content

问题描述

我见过一对夫妇类似的问题在这里没有真正的答案。希望有人注意到这...

I've seen a couple similar questions here with no real answers. Hopefully someone notices this...

IE 8并在下面拒绝从标题中定义的CSS样式表时，他们在一个的document.ready jquery的呼叫被加载到应用样式。

IE 8 and below are refusing to apply styles from the css stylesheet defined in the header when they are loaded in a document.ready jquery call.

偏执的客户希望有人看见code或开发网站，所以我得给一个简短的例子。 客户希望网站上的几乎全部ajaxed网站呈现HTML的只有相关的部分。因此，该站点是象的网格。如果您加载网页你会得到这样的：

Paranoid client wants NOBODY to see code or the dev site so I'll have to give a short example. The client wants the site to render only the relevant portion of HTML on a nearly exclusively "ajaxed" site. So, the site is like a grid. If you load the homepage you get this:

<div id="content">
    <section id="home">
        <h1>Title</h1>
        <p>Hi There!</p>
    </section>
</div>

然后onload事件我使用jQuery使周围的网页...

Then onload I use jquery to render the surrounding pages...

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

IE浏览器能够处理这么多的，但是当涉及到​​尊重我精心策划的CSS，它只是忽略了风格和嘲笑我。

IE can handle this much, but when it comes to respecting my carefully plotted css, it just ignores the styles and laughs at me.

该网站完全定位，绝对定位，吨Z-索引和jQuery动画的可怕的金额。那种东西，你不希望有重新创建一些额外的愚蠢的方式为一些劣质还主要使用的浏览器。亲爱的上帝，请告诉我，有人想出了一些办法让IE尊重在加载后创建的元素定义的样式。

The site is entirely positioned with absolute positioning, tons of z-indexing and a horrendous amount of jquery animation. The kind of thing you do not want to have recreate in some extra stupid way for some inferior yet dominantly used browser. Dear god please tell me someone has figured out some way to get IE to respect defined styles on elements created after load.

你们有什么想法？

• 我知道真正的code块被pferred $ P $但这是简洁的，并且告诉你足够，而不必完全成熟的审计。即使只定义的样式是#about {显示：无; }将被忽略。在有关部分写成要求，但它是由默认的显示模块。

• I know chunks of real code are preferred but this is succinct and tells you enough without having a full blown audit. Even if the only defined style is #about{ display:none; } it is ignored. The about section is written as requested but it is display block by default.

我也知道这是不是技术上ajaxing，但我使用的技术术语，试图澄清页面加载的顺序一样，因为它不是标准加载的HTML。

I also know this is not technically ajaxing, but I'm using technical jargon to attempt to clarify the order of page loading in as much as it is not standard loaded html.

的解

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

正确应用元素，以及CSS的，这和所有的孩子。不知道为什么嵌套的元素都正确地通过IE浏览器读取，而不需要被宣布以同样的方式，但我绝对感激。谢谢jfriend00和其他人谁帮助。

Properly applies the element as well as the css for this and all children. Not sure why nested elements are read properly by IE without having to be declared the same way, but I am definitely grateful. Thanks jfriend00 and everyone else who helped.

推荐答案

现在的问题是，该行的code不生成HTML对象在IE7 / IE8所需的设定：

The problem is that this line of code does not generate the desired set of HTML objects in IE7/IE8:

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

如果你在IE浏览器的DOM检查，看不到嵌套适当所以DOM被搞砸了，因此样式规则不起作用适当所需的标签。问题是事情是如何得到插入到DOM的jQuery。我认为这是一个jQuery的交互问题，IE比什么都重要。

If you look in the IE DOM inspector, you don't see the desired tags nested appropriately so the DOM is messed up and thus the style rules don't work appropriately. The issue is how things are getting inserted into the DOM by jQuery. I think it's a jQuery interaction problem with IE more than anything else.

如果没有通过code。在细节上的IE加强，我不能说是否它实际上是一个jQuery的问题，或者一个IE浏览器的问题或者那些weired组合的错误只有一个。很显然，IE浏览器已经赢得了第一个怪的权利是previous犯，但它可能会更好，只是避免这种错误通过使用一些更直接的code。

Without stepping through the code in detail on IE, I can't say whether it's actually a jQuery issue or an IE issue or just one of those weired combo bugs. Obviously, IE has earned the right of first blame for it's previous transgressions, but it's probably better to just avoid this bug by using some more straightforward code.

打破codeA位，这code为我工作在IE7：在这里，我们创建一个标签，添加一些innerHTML来，然后用追加（）插入根标签，而不是给HTML追加。

Breaking down the code a bit, this code works for me in IE7: Here, we create a single tag, add some innerHTML to it and then insert that root tag using append() rather than give HTML to append.

$(document).ready(function() { 
    var section = $("<section>");
    section.attr("id", "about");
    section.html('<h1>About Us</h1>');
    $('#content').append(section);
});

您可以看到修改后的code在这里工作： http://jsfiddle.net/jfriend00/vEST8/

You can see the revised code work here: http://jsfiddle.net/jfriend00/vEST8/

我不知道为什么IE浏览器直接通过jQuery附加一个全HTML字符串的一个问题，但我已经看到了这一问题。

I don't know why IE has a problem with appending an whole HTML string directly via jQuery, but I have seen this problem before.

这篇关于IE浏览器会忽略样式动态加载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！