可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

In a simple web page I load some new HTML into a div using load(url) Works fine in most browsers but, surprise, surprise, IE7 behaves differently. All the other browsers apply the pages CSS styles to the newly loaded HTML but IE7 doesn't.

Any ideas?

Ken

Update The new HTML is just a code fragment, e.g.

<div class="classname">
blah blah blah
</div>

Update I think I'm calling it OK. This isn't what I'm actually doing but a simplified version which reproduces the problem ...

.
.
.    
google.load("jquery", "1.3.2"); 
    google.setOnLoadCallback(function() {
       $(document).ready(function() {
         $("#nav-home").click(function() {
           $("#girc-content").load("home.html");
         });
.
.
.

Update On further investigation the problem appears to be slightly more odd than I thought.

I tried Steerpike's suggestion because I originally thought the problem was that the CSS styles were not being applied.

However, it now appears that only some of the styles are being applied. For example, the text color attribute for the <h2> tag is applied, but the width attribute for the <div> tag is not.

回答1:

In light of extra information, take 2...

Are the styles not being applied in the master HTML page or the page you're loading? If they're in the page you're loading it seems that IE strips out script and style tags from XMLHttpRequest objects.

Given that it's not that and I'm intrigued I constructed a sample:

<html>
<head>
<title>test</title>
<style type="text/css">
#girc-content { border: 1px solid black; width: 100px }
h3 { color: red; }
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2"); 
google.setOnLoadCallback(function() {
  $(document).ready(function() {
    $("#nav-home").click(function() {
      $("#girc-content").load("test2.html");
    });
  });
});
</script>
</head>
<body>
<div id="girc-content">
blah blah blah
</div>
<input type="button" value="click me" id="nav-home">
</body>
</html>

and test2.html:

<html>
<head>
</head>
<body>
<h3>This is a test</h3>
</body>
</html>

This works perfectly for me in IE8 standards and compatibility mode (sorry no IE7 any more).

I did notice when I copied your google onload snippet that you were missing some closing braces/parentheses. Was this just a cut and paste error or a problem with your Javascript? It might explain the inconsistent behaviour.

回答2:

Try 'touching' the content again after you load it. The simplest way tends to just add a null string to the innerHTML

$("#nav-home").click(function() {
    $("#girc-content").load("home.html");
    $("#girc-content")[0].innerHTML += '';
});

回答3:

The link helped me; essentially, adding the style tag into the head, even dynamically, applies the styles through ie. I added this to the top of the onready handler and it worked well.

http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
  rel:  "stylesheet",
  type: "text/css",
  href: "/javascripts/jwysiwyg/jquery.wysiwyg.css"
});

回答4:

I had similar problem - IE8 sometimes has a problem with apply styles in content loaded by ajax jQuery function. I don't know why but this helped:

$.ajax({
url: 'content.html',
success: function(data) {
   $('#content').html(data); //styles doeas not appear in ie8
   document.getElementById('content').innerHTML = data; /* ie8 - now it works oO */
}