Проблемы макета / JavaScript с Internet Explorer 8 - PullRequest
Новая
       7

Проблемы макета / JavaScript с Internet Explorer 8

2 голосов
/ 26 августа 2010

Я использую асинхронный загрузчик JavaScript для загрузки нового JS SDK (all.js).Я хочу загрузить набор HTML через AJAX, а затем проанализировать результат.Неудивительно, что он отлично работает в Firefox и Chrome, но IE исправляет результат, когда изображение профиля, похоже, настроено для перемещения по другим полям, и у меня есть три других элемента div (status-content, status-txt, msgft), содержащих контент избаза данных, что я даже не уверен, куда они идут.У меня есть строгий XHTML-тип документа и XML-файл FBML.Обратите внимание, что проблема возникает только после вызова 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="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>

Кто-нибудь может указать, что мне не хватает, пока у меня не осталось волос?

ОБНОВЛЕНИЕ:

Не похоже, что это особый элемент 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>

Я посмотрю, смогу ли я получитьживая ссылка для вас, ребята, но есть предложения до тех пор?

1 Ответ

0 голосов
/ 27 августа 2010

Это всегда простые вещи ... Я использовал формат FBML (без закрывающего тега), а не тег XFBML, поэтому исправление было добавить: 

</fb:profile-pic>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...