Internet Explorer 8的佈局/ Javascript問題

我使用Facebook異步JavaScript加載器加載新的JS SDK（all.js）。我想通過AJAX加載一組html，然後解析結果。毫不奇怪，它在Firefox和Chrome中效果很好，但是IE損壞了配置文件圖像似乎被設置爲在其他字段上浮動的結果，並且我還有三個其他的div（status-content，status-txt，msgft）一個數據庫，我甚至不知道他們要去哪裏。我有XHTML嚴格的文檔類型和FBML xmlns。注意只有在調用FB.XFBML.parse後纔會出現該問題。這是什麼a pic of the render issue with IE8 on top and chrome/firefox on the bottom。Internet Explorer 8的佈局/ Javascript問題

下面是示例代碼：

<!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的內容：

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

任何人都可以指出什麼我失蹤之前，我沒有任何的頭髮剩下？

UPDATE：

它看起來並不像它的特定的Facebook的元素儘可能IE。添加以下的代碼：

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不得不說：

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>

我去看看，如果我能得到一個活鏈接爲你們有什麼建議，直到那時？

來源

2010-08-26 JSP

你有一個活頁的地方？如果您只有2個fbml字段，則嘗試刪除一個並查看哪一個導致問題。 – serg 2010-08-26 15:12:37

@serg我更新了帖子以反映新的發現，但我會看看我是否可以爲您獲得實時鏈接。 – JSP 2010-08-26 22:40:15

它總是簡單的事情......我用的是FBML格式（沒有結束標籤）不是XFBML標記，以便修復是添加：

</fb:profile-pic>

來源

2010-08-27 16:02:46 JSP

Internet Explorer 8的佈局/ Javascript問題

回答

相關問題