Question

我正在构建一个HTML页面，使用无限滚动功能在向下滚动时呈现新的列表元素，就像在Facebook上一样。我正在使用jquery.pageless plugin。

问题是，现在在IE7上测试它，当我加载动态内容时，没有一个像它应该的样式。服务器在html页面中生成的第一组（20行）看起来很好。然后，使用javascript呈现的下一页每页20页，没有应用任何样式。

我该如何解决这个问题？很难从Mac中在IE7中测试它。这是IE7的问题吗？或者也许这些元素不会被附加到IE中正确的父div（使用jQuery，所以我怀疑这一点）？或者，在添加每个动态创建的html元素后，是否存在重新加载样式表的常见错误？

doctype是HTML5：<!DOCTYPE html>

感谢您的建议！

更新：

在IE7开发人员面板中，HTML正在吐出所有格式错误。第一次看起来像这样：

<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'>
  <figure class='snapshot'><time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'><span class='value-title' title='2010-12-16T00:00:00-08:00'></span></time><a href="/users/25?page_id=25" class="fancy-ajax logo"><span></span><img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/heavenly-cleaning-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" /></a>
    <a href="/pages/25/bookmarks" class="status bookmark">Like</a>
  </figure>
  <section class='details' itemprop='seller' itemtype='http://data-vocabulary.org/Organization'>
    <header class='header'>
      <hgroup>
        <h3 class='user fn org' itemprop='name'>
          <a href="/users/25?page_id=25" class="fancy-ajax">Name</a><span class='hyphen'>-</span><span class='distance'>Wheaton, IL</span>
        </h3>
        <h2 class='title'><span class='quotation-mark'>"</span><a href="/users/25/pages/25" class="url summary">Quote</a><span class='quotation-mark'>"</span><time class='expiration-date dtend'><span class='value-title' title='2011-12-16T00:00:00-08:00'></span></time></h2>
      </hgroup>
    </header>
    <p class='highlights'></p>
    <p class='description' itemprop='description'></p>
    <footer class='footer'>
      <address class='location adr' itemprop='address' itemscope='itemscope' itemtype='http://data-vocabulary.org/Address'>
        <span class='locality' itemprop='locality'></span>
        <span class='geo' itemprop='geo' itemtype='http://data-vocabulary.org/Geo'>
          <span class='latitude' itemprop='latitude'>
            <span class='value-title' title='41.850249'></span>
          </span>
          <span class='longitude' itemprop='longitude'>
            <span class='value-title' title='-88.0855459'></span>
          </span>
        </span>
        <span class='tel' itemprop='tel'></span>
      </address>
      Category: <a href="/pages/home" class="category" itemprop="category" rel="tag" target="_top">Home</a>
    </footer>
  </section>
</article>

第二次看起来更像是这样：

<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'/>
<figure class='snapshot'/>
<time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'/>
<span class='value-title' title='2010-12-16T00:00:00-08:00'/>
</time/>
<a href="/users/25?page_id=25" class="fancy-ajax logo">
  <span/>
  <img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/name-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
</a>
<a href="/pages/25/bookmarks" class="status bookmark">Like</a>
</figure/>
...

我将它作为json字符串返回并将其添加为：

$(window).load(function() {
  var params = paginator;
  params.dataType = "string";
  $('#content').pageless({
    url: window.location.pathname,
    params:      params,
    distance:    500,
    totalPages:  10,
    loaderImage: "/images/loaders/load.gif",
    scrape: function(data) {
      var data      = $.parseJSON(data);
      var paginator = data.paginator;
      var search    = data.search;
      var html      = data.pages // html string;

      if (data.more == false) {
        $.pageless.settings.totalPages = $.pageless.settings.currentPage;
        if($.pageless.settings.totalPages <= $.pageless.settings.currentPage){
          $.pageless.stopListener();
        }
      }

      $.pageless.settings.params = {dataType: "string", paginator: paginator, q: search.q, c: search.c, l: search.l, a: search.a};

      return html;
    }
  });
})

Answer 1

由于您使用的是HTML5元素，我假设您使用HTML5Shiv或Modernizr来破解IE以支持这些元素？

如果没有，那么肯定会有问题，因为IE6 / 7/8根本不会将这些标签识别为有效的HTML。

IE7在动态创建DOM元素时应用CSS会有问题吗？

1 个答案: