IE7在應用CSS動態創建DOM元素時有問題嗎？

我正在構建一個HTML頁面，使用無限滾動功能在向下滾動時呈現新列表元素，就像在Facebook上一樣。我正在使用jquery.pageless plugin。IE7在應用CSS動態創建DOM元素時有問題嗎？

事情是，現在在IE7上測試它，當我加載動態內容時，沒有一個樣式應該是它的樣式。第一組（20行），服務器在html頁面中生成的，看起來很好。然後，使用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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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; 
    } 
    }); 
})

來源

2011-02-28 Lance Pollard

IE7有很多問題，但我不記得那樣。您可能遇到其他瀏覽器處理得更好的問題。任何鏈接到實時頁面的機會？它是迄今爲止*調試這些問題的最簡單方法。 – thirtydot 2011-02-28 10:59:25

我正在返回一個json對象中的字符串，是一個問題？喜歡這個'{html：「

...

」}' – 2011-02-28 11:25:15

是否是有效的HTML？文章，圖等...不是那些HTML5元素？ – Quamis 2011-02-28 11:28:19

由於您使用的是HTML5元素，我假設您使用HTML5Shiv或Modernizr來攻擊IE來支持這些元素？

如果沒有，那麼肯定會有問題，因爲IE6/7/8將無法將這些標記識別爲有效的HTML。

來源

2011-02-28 11:29:03 Spudley

這很有道理。爲什麼它第一次運行，而不是當js完成時？ – 2011-02-28 11:33:12

@viatropos：如果你不使用IE瀏覽器中的HTML5黑客之一，那麼你很幸運，它適用於任何一種。如果你使用DOM函數而不是innerHTML插入它們，你可能會發現插入JS的將會更好，因爲IE可能更容易以這種方式拾取新元素，但我不能擔保。底線是，IE <9不支持HTML5，雖然在某些情況下可以使用它，但您可能會發現其他情況下不起作用。 – Spudley 2011-02-28 11:41:19

它看起來像是html5標籤的問題。但爲什麼他們會第一次罰款呢？ – 2011-02-28 11:46:17

IE7在應用CSS動態創建DOM元素時有問題嗎？

回答

相關問題