我在這裏看到過幾個類似的問題，沒有真正的答案。希望有人注意到這一點...IE忽略動態加載內容的樣式

IE 8及以下版本拒絕從頭文件中定義的CSS樣式表應用樣式，當它們加載到document.ready jquery調用中時。

偏執客戶希望NOBODY查看代碼或開發網站，所以我必須舉一個簡短的例子。客戶希望網站僅在幾乎完全「ajaxed」的網站上呈現HTML的相關部分。所以，該網站就像一個網格。如果您加載網頁你會得到這樣的：

<div id="content"> 
    <section id="home"> 
     <h1>Title</h1> 
     <p>Hi There!</p> 
    </section> 
</div>

然後爲onload我使用jQuery使周圍的網頁...

$(document).ready(function(){ 
    $('#content').append('<section id="about"><h1>About Us</h1></section>'); 
});

IE可以多處理這個問題，但是當涉及到尊重小心我繪製的CSS，它只是忽略了風格和笑我。

該網站完全定位與絕對定位，噸的Z索引和可怕的數量的jquery動畫。這種事情你不想用一些額外的愚蠢的方式重新創建一些劣質但占主導地位的瀏覽器。親愛的上帝請告訴我，有人已經想出了一些方法讓IE瀏覽器在加載後創建的元素上遵循定義的樣式。

你有什麼想法嗎？

我知道真正的代碼塊是首選，但這是簡潔的，並告訴你沒有一個完整的審計足夠。即使唯一定義的樣式是#about {display：none; }它被忽略。 about部分按要求寫入，但默認情況下是顯示部分。
我也知道這不是技術上的ajaxing，但我使用技術術語試圖澄清頁面加載的順序，因爲它不是標準加載的html。

的解

$('#content').append($('<section>').attr('id', 'about').html('<h1>About Us</h1><p>some text</p>'));

正確應用元素，以及這個和所有兒童的CSS。不知道爲什麼嵌套元素可以通過IE瀏覽器正確讀取，而不必以相同的方式聲明，但我非常感謝。感謝jfriend00和其他幫助過的人。

來源

2011-09-28 Kai Qing

你被允許發佈一些有問題的CSS？這意味着我們可以在我們自己的瀏覽器中啓動示例。更好的辦法是在http://jsfiddle.net/上發佈樣本，這樣我們就可以自己玩。 – griegs

IE可以很好地處理樣式和類。我一直使用它動態添加元素。爲了幫助我們，您必須給我們一個在IE中無法使用的特定示例，我們可以幫助您找到問題所在。您不必重寫您的代碼或HTML或CSS。您可能只是在HTML或CSS中出現一些愚蠢的解析錯誤。如果你創建了一個解釋問題的jsFiddle，我們可以幫你修復它。 – jfriend00

http://jsfiddle.net/eDqca/1/ 我已將它剝離到幾乎沒有。沒有錯誤或警告。 jsfiddle像本文中提到的那樣重新創建。 jsfiddle獲取onload錯誤，但仍然顯示問題 –

的問題是，這行代碼不會生成HTML對象在IE7/IE8所需的設定：

$('#content').append('<section id="about"><h1>About Us</h1></section>');

如果您查看IE DOM檢查器，則看不到適當嵌套的所需標記，因此DOM被搞砸了，因此樣式規則無法正常工作。問題在於jQuery如何將事物插入到DOM中。我認爲這是一個IE瀏覽器的jQuery交互問題。

沒有詳細介紹IE上的代碼，我不能說它實際上是一個jQuery問題還是一個IE問題，或者只是其中一個組合錯誤。很明顯，IE獲得了先前違規的第一責任，但通過使用更直接的代碼來避免此錯誤可能更好。在這裏，我們創建一個標籤，向它添加一些innerHTML，然後使用append（）插入該根標籤，而不是給HTML添加附件。

$(document).ready(function() { 
    var section = $("<section>"); 
    section.attr("id", "about"); 
    section.html('<h1>About Us</h1>'); 
    $('#content').append(section); 
});

你可以看到修改後的代碼在這裏工作：http://jsfiddle.net/jfriend00/vEST8/

我不知道爲什麼IE具有通過jQuery直接附加的整個HTML串一個問題，但我以前也看到這個問題。

來源

2011-09-28 23:28:11 jfriend00

正是如此。我測試了你的方法，它工作。希望這是一切的基本。順便說一句，它應該附加「部分」而不是「div」，以防任何人試圖複製/粘貼來測試它。 –

我在IE7中仍然遇到此代碼的問題。當HTML中有

標籤時，我無法讓IE7動態創建正確的對象。 – jfriend00

如果有幫助知道的話，我在IE7和8的這個精簡版本中有相同的建議： $（'＃content'）。append（$（'

'）.attr（'id' ，'about'）。html（'

some text

some more text

'））; 它正確地呈現元素並將樣式應用於所有的孩子。謝謝 –

爲了安全起見，使用jQuery申請稱，追加後的類：

$('#content').append('<section id="about"><h1>About Us</h1></section>'); 
$("#about").addClass("foo");

來源

2011-09-28 22:47:57 karim79

我有點害怕，因爲大約增加了2000個元素，這裏提到的做法適用於這個類，它甚至可以尊重所述類的定義。但它完全忽略了對所有兒童的要求。所以$（'＃about'）。addClass（'hidden'）;隱藏關於部分，但h1裏面仍然是顯示塊並自豪地顯示，即使父母被認爲是隱藏的。 –

這很糟糕。我認爲你可以重新應用*所有*樣式到*所有*附加元素 - 必須有更好的方法。 – karim79

IE忽略動態加載內容的樣式

回答

some text

相關問題