Internet Explorer 8的布局/ Javascript问题 [英] Layout / Javascript issues with Internet Explorer 8

问题描述

我正在使用Facebook异步JavaScript加载器加载新的JS SDK（all.js）。我想通过AJAX加载一组html，然后解析结果。毫不奇怪，它在Firefox和Chrome中的效果非常好，但是IE会将配置文件图片设置为浮动在其他字段上的结果，而且我还有三个其他div（status-content，status-txt，msgft）一个数据库，我甚至不知道他们要去哪里。我有XHTML严格的doctype和FBML xmlns。请注意，问题只在调用FB.XFBML.parse后出现。以下是顶部的IE8渲染问题的图片，底部的chrome / firefox >。

以下是示例代码：

 <！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 =statusesstyle =width：600px;>< / div> 
 
< div id =fb-root>< / div> 
< script> 
 window.fbAsyncInit = function（）{
 FB.init（{
 appId：'APP_ID'，
 status：true，//检查登录状态
 cookie： true，//启用Cookie以允许服务器访问会话
 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（'status '））; 
}）; 
} 
}）; 
}; 
< / script> 
< / body> 
 
< / html> 
  

这里是doc1.html的内容：

 < div class =statusstyle =border-bottom：1px solid #ccc; padding：4px;>< div class =picstyle = float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size =square/>< / div> div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txtstyle =padding：5px;> span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asf< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asfdasfds< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> wasdfasd< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asdfasdfas< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asdf< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> sss< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asdfasdf< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asdf3333< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asdf< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div>< div class =statusstyle =border-bottom：1px solid #ccc; padding：4px; >< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid =4size = square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txt style =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span>这里是test2< / div>< div class =msgftstyle =padding：5px;> 2天前 - < a href =＃> 1注释< / a>< / div> ;< / div>< div style =clear：both;>< / div>< / div>< div id =more>< a href =/ status / list。 js / page / 2>显示更多< / a>< / div> 
  

任何人都可以指出我没有留下任何头发之前我错过了什么？ p>

更新：

它看起来不像IE一样特定的facebook元素。我添加了以下代码：

  try {console.log（BEFORE APPEND：+ data）; } catch（e）{} 
 $（'＃statuses'）。append（data）; 
 
 var data = $（'＃statuses'）。html（）; 
尝试{console.log（AFTER APPEND：+数据）; } catch（e）{} 
  

FF中的结果是预期的，这是IE必须说：

 日志：在APPEND之前：< div class =statusstyle =border-bottom：1px solid #ccc ; padding：4px;>< div class =picstyle =float：left; background-color：#fff; height：50px; width：50px;>< fb：profile-pic uid = 4size =square/>< / div>< div class =status-contentstyle =float：left; margin-left：10px; width：445px;>< div class =status-txtstyle =padding：5px;>< span>< fb：name uid =4useyou =falsefirstnameonly =true/>< / span> asf< / div>< div class =msgftstyle =padding：5px;> 1天前 - < a href =＃> 1注释< / a>< / div> / div>< div style =clear：both;>< / div>< / div> 
 
 
日志：后缀：< DIV style =WIDTH：445px; FLOAT：left; MARGIN-LEFT：10pxclass = status-content> 
< DIV style =PADDING-BOTTOM：5px; PADDING-LEFT：5px; PADDING-RIGHT：5px; PADDING-TOP：5pxclass = status-txt>< SPAN><？xml：namespace prefix = fb />< fb：name uid =4firstnameonly =trueuseyou =false>< / fb：name>< / SPAN> asf< / DIV> 
< DIV style =PADDING-BOTTOM：5px; PADDING-LEFT：5px; PADDING-RIGHT：5px; PADDING-TOP：5pxclass = msgft> 1天前 - < A href =＃ > 1注释< / A>< / DIV>< / DIV> 
< DIV style =CLEAR：both>< / DIV> 
  

我会看到我是否可以获得一个直播链接，但直到那时呢？ / p>

解决方案

总是简单的事情...我使用FBML格式（没有结束标签）不是XFBML标签，所以修复是添加：

 < / fb：profile-pic> 
  

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.

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>

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?

UPDATE:

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) {}

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?

解决方案

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>

这篇关于Internet Explorer 8的布局/ Javascript问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！