与IE7的JQuery，Ajax和CSS问题 [英] Problem with IE7 JQuery, Ajax and CSS
问题描述
在一个简单的网页我加载一些新的HTML到一个 DIV 使用的负荷（URL）的 正常工作在大多数浏览器，但是，想不到，IE7的行为不同。 所有其他浏览器应用页面的CSS样式的新加载HTML，但IE7不会。
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.
任何想法？
肯
更新 新的HTML只是一个code片段，例如。
Update The new HTML is just a code fragment, e.g.
<div class="classname">
blah blah blah
</div>
更新我想我打电话就OK了。 这不是我实际上做什么，但它重现问题的简化版本...
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.
我想Steerpike的建议，因为我本来以为这个问题是，CSS样式并没有被应用。
I tried Steerpike's suggestion because I originally thought the problem was that the CSS styles were not being applied.
不过，现在看来只有部分的样式被应用。
例如，文本颜色属性＆LT; H2＆GT; 标签被应用，但对于width属性的＆LT; DIV＆GT; 标签是没有的。
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.
推荐答案
在光的额外信息，需2 ...
In light of extra information, take 2...
是风格不被在主HTML页面或您正在加载的网页应用？如果他们在你的网页正在加载似乎IE剔除了脚本和样式标签从XMLHtt prequest对象。
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>
和test2.html：
and test2.html:
<html>
<head>
</head>
<body>
<h3>This is a test</h3>
</body>
</html>
这完美的作品，我在IE8标准和兼容性模式（抱歉没有IE7更多）。
This works perfectly for me in IE8 standards and compatibility mode (sorry no IE7 any more).
我也注意到，当我复制你的谷歌的onload片段，你是缺少一些结束括号/括号。当时这只是一个剪切和粘贴错误或你的Javascript的问题吗？这或许可以解释的不一致的行为。
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.
这篇关于与IE7的JQuery，Ajax和CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
