IE bỏ qua các kiểu cho nội dung được tải động

Question

Tôi đã nhìn thấy một vài câu hỏi tương tự ở đây mà không có câu trả lời thực sự. Hy vọng rằng ai đó để ý điều này ...

IE 8 trở xuống từ chối áp dụng kiểu từ biểu định kiểu css được xác định trong tiêu đề khi chúng được tải trong một cuộc gọi jquery tài liệu.

Khách hàng hoang tưởng muốn NOBODY xem mã hoặc trang web nhà phát triển vì vậy tôi sẽ phải đưa ra một ví dụ ngắn. Ứng dụng khách muốn trang web chỉ hiển thị phần HTML có liên quan trên trang web "được đánh giá cao" gần như độc quyền. Vì vậy, trang web giống như một mạng lưới. Nếu bạn tải các trang web của bạn có được điều này:

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

Sau đó onload tôi sử dụng jquery để render các trang xung quanh ...

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

IE có thể xử lý này nhiều, nhưng khi nói đến việc tôn trọng tôi một cách cẩn thận âm mưu css, nó chỉ bỏ qua các phong cách và cười với tôi.

Trang web được định vị hoàn toàn với vị trí tuyệt đối, tấn chỉ mục z và một số lượng khủng khiếp của hoạt ảnh jquery. Các loại điều bạn không muốn có tái tạo trong một số cách ngu ngốc thêm cho một số kém hơn nhưng được sử dụng chủ yếu là trình duyệt. Thưa Chúa, xin hãy cho tôi biết một người nào đó đã tìm ra cách nào đó để có được IE để tôn trọng phong cách được xác định trên các yếu tố được tạo ra sau khi tải.

Bạn có ý tưởng nào không?

• Tôi biết các đoạn mã thực được ưa thích nhưng điều này gọn gàng và cho bạn biết đủ mà không có kiểm tra toàn diện. Ngay cả khi kiểu được xác định duy nhất là #about {display: none; } nó bị bỏ qua. Phần giới thiệu được viết theo yêu cầu nhưng nó được hiển thị theo mặc định.

• Tôi cũng biết điều này không phải là kỹ thuật ajaxing, nhưng tôi đang sử dụng thuật ngữ kỹ thuật để cố gắng làm rõ thứ tự tải trang nhiều như nó không phải là tiêu chuẩn tải html.

CÁC GIẢI PHÁP

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

đúng áp dụng các yếu tố cũng như css cho điều này và tất cả trẻ em. Không chắc chắn tại sao các phần tử lồng nhau được đọc đúng cách bởi IE mà không cần phải được khai báo theo cùng một cách, nhưng tôi chắc chắn biết ơn. Cảm ơn jfriend00 và mọi người đã giúp đỡ.

Answer 1

Vấn đề là dòng mã này không tạo ra các thiết lập mong muốn của các đối tượng HTML trong IE7/IE8:

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

Nếu bạn nhìn vào thanh tra IE DOM, bạn không thấy các thẻ mong muốn lồng nhau một cách thích hợp để DOM bị rối tung và do đó quy tắc kiểu không hoạt động phù hợp. Vấn đề là làm thế nào mọi thứ được đưa vào DOM bởi jQuery. Tôi nghĩ rằng đó là một vấn đề tương tác jQuery với IE nhiều hơn bất cứ điều gì khác.

Nếu không có thông tin chi tiết về mã trên IE, tôi không thể nói đây có phải là vấn đề về jQuery hay vấn đề về IE hay chỉ là một trong những lỗi kết hợp. Rõ ràng, IE đã giành được quyền đổ lỗi đầu tiên cho những lần vi phạm trước đó, nhưng có lẽ tốt hơn là chỉ nên tránh lỗi này bằng cách sử dụng một số mã đơn giản hơn.

Phá mã xuống một chút, mã này hoạt động cho tôi trong IE7: Ở đây, chúng ta tạo một thẻ, thêm một số innerHTML vào nó và sau đó chèn thẻ gốc đó bằng append() thay vì cung cấp HTML để nối thêm.

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

Bạn có thể xem công việc mã sửa đổi ở đây: http://jsfiddle.net/jfriend00/vEST8/

Tôi không biết tại sao IE có một vấn đề với phụ thêm một chuỗi HTML toàn bộ trực tiếp qua jQuery, nhưng tôi đã nhìn thấy vấn đề này trước đây.

Answer 2

Để được an toàn, sử dụng jQuery để áp dụng cho các lớp học sau khi append:

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