Question

在一个简单的网页中，我使用 load（url）将一些新的HTML加载到 div 中在大多数浏览器中工作得很好，但令人惊讶的是，IE7表现不同。所有其他浏览器都将页面CSS样式应用于新加载的HTML，但IE7不会。

有什么想法吗？

肯

更新新的HTML只是一个代码片段，例如

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

更新我认为我称之为正常。这不是我实际在做的，而是一个简化版本，可以重现问题...

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

更新在进一步调查中，问题似乎比我想象的更奇怪。

我尝试过Steerpike的建议，因为我原本以为问题是没有应用CSS样式。

然而，现在似乎只应用了一些样式。例如，应用<h2>标记的文字颜色属性，但<div>标记的宽度属性不是。

Answer 1

根据额外信息，请选择2 ...

样式是否未在主HTML页面或您正在加载的页面中应用？如果它们位于您正在加载的页面中，那么IE似乎会从XMLHttpRequest对象中删除脚本和样式标记。

鉴于它不是那个而且我很感兴趣我构建了一个样本：

<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>

和test2.html：

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

这在IE8标准和兼容模式下对我来说非常适合（对不起IE7了。）

我确实注意到，当我复制你的google onload片段时，你错过了一些结束括号/圆括号。这只是一个剪切和粘贴错误或您的Javascript问题？它可能解释了不一致的行为。

Answer 2

加载后再次尝试“触摸”内容。最简单的方法是将空字符串添加到innerHTML

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

Answer 3

链接帮助了我;实质上，即使是动态地将样式标签添加到头部，也可以通过ie应用样式。我将它添加到onready处理程序的顶部，它运行良好。

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"
});

Answer 4

我有类似的问题 - IE8有时在ajax jQuery函数加载的内容中应用样式有问题。我不知道为什么，但这有助于：

$.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 */
}

IE7 JQuery，Ajax和CSS的问题

4 个答案: