布局/ Javascript的问题与Internet Explorer 8 [英] Layout / Javascript issues with Internet Explorer 8
本文介绍了布局/ Javascript的问题与Internet Explorer 8的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是Facebook的异步的JavaScript加载器加载新的JS SDK（all.js的）。我想要加载通过AJAX一组HTML，然后分析结果。毫不奇怪它的伟大工程在Firefox和Chrome浏览器，但IE轧液，其中一个轮廓峰似乎设置浮动在其他领域的结果，我已经得到了含有内容的另外三个div的（状态的内容，状态，TXT，msgft）我甚至不知道哪里去了一个数据库。我有XHTML严格DOCTYPE和FBML的xmlns。注在FB.XFBML.parse后，问题仅出现。下面是你应该渲染问题的顶部和铬/ Firefox的底部一个事先知情同意与IE8
I'm using the Facebook async javascript loader to load the new JS SDK (all.js). I want to load a set of html via AJAX and then parse the result. Not surprisingly it works great in Firefox and Chrome but IE mangles the result where a profile pic appears to be set to float over the other fields and I've got three other divs (status-content, status-txt, msgft) containing content from a database that I'm not even sure where they are going. I have the XHTML strict doctype and the FBML xmlns. Note the issue ONLY comes up after calling FB.XFBML.parse. Here is what it a pic of the render issue with IE8 on top and chrome/firefox on the bottom.
下面是一个示例code：
Here is sample code:
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="statuses" style="width: 600px;"></div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
$(document).ready(function() {
if ($('#statuses').length) {
$.get('doc1.html', function(data) {
$('#statuses').append(data);
FB.XFBML.parse(document.getElementById('statuses'));
});
}
});
};
</script>
</body>
</html>
和这里是doc1.html的内容：
and here is the contents of doc1.html:
<div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asf</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asfdasfds</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> wasdfasd</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asdfasdfas</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asdf</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> sss</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asdfasdf</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asdf3333</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asdf</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> here is a test2</div><div class="msgft" style="padding: 5px;">2 days ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div><div id="more"><a href="/status/list.js/page/2">show more</a></div>
任何人都可以指出我很想念我没有任何离开前发？
Can anyone point out what I'm missing before I don't have any hair left?
更新：
它看起来并不像它的一个具体的Facebook的元素尽可能IE浏览器。我增加了以下到code：
It doesn't look like it's a specific facebook element as much as IE. I added the following to the code:
try { console.log("BEFORE APPEND: " + data); } catch (e) {}
$('#statuses').append(data);
var data = $('#statuses').html();
try { console.log("AFTER APPEND: " + data); } catch (e) {}
结果在FF的预期，这就是IE不得不说：
The result in FF is as expected and this is what IE had to say:
LOG: BEFORE APPEND: <div class="status" style="border-bottom: 1px solid #ccc; padding: 4px;"><div class="pic" style="float: left; background-color: #fff; height: 50px; width: 50px;"><fb:profile-pic uid="4" size="square" /></div><div class="status-content" style="float:left; margin-left: 10px; width: 445px;"><div class="status-txt" style="padding: 5px;"><span><fb:name uid="4" useyou="false" firstnameonly="true" /></span> asf</div><div class="msgft" style="padding: 5px;">1 day ago - <a href="#">1 Comment</a></div></div><div style="clear: both;"></div></div>
LOG: AFTER APPEND: <DIV style="WIDTH: 445px; FLOAT: left; MARGIN-LEFT: 10px" class=status-content>
<DIV style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" class=status-txt><SPAN><?xml:namespace prefix = fb /><fb:name uid="4" firstnameonly="true" useyou="false"></fb:name></SPAN>asf</DIV>
<DIV style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" class=msgft>1 day ago - <A href="#">1 Comment</A></DIV></DIV>
<DIV style="CLEAR: both"></DIV>
我会看看我是否能得到任何建议，一个活链接为你们但在那之前？
I'll see if I can get a live link for you guys but any suggestions until then?
推荐答案
它总是把简单的事情......我用的是FBML格式（没有结束标签）不是XFBML标记，以便修复被添加：
It's always the simple things... I was using the FBML format (no closing tag) not the XFBML tag so the fix was to add:
</fb:profile-pic>
这篇关于布局/ Javascript的问题与Internet Explorer 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
