IE는 동적으로로드 된 내용의 스타일을 무시합니다.

Question

여기에 몇 가지 비슷한 질문이 있습니다. 누군가가이 사실을 알기를 바랍니다.

IE 8은 document.ready jquery 호출에서로드 될 때 헤더에 정의 된 CSS 스타일 시트에서 스타일을 적용하는 것을 거부합니다.

편집증 클라이언트는 NOBODY가 코드 또는 dev 사이트를보고 싶어하므로 간단한 예를 들어야합니다. 클라이언트는 거의 독점적으로 "ajaxed"사이트에서 HTML의 관련 부분 만 렌더링하려고합니다. 따라서 사이트는 그리드와 같습니다. 당신이 홈페이지를로드 할 경우이 얻을 :

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

다음

나는 주위의 페이지를 렌더링하는 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과 도움을 준 다른 모든 사람들에게 감사드립니다.

Answer 1

문제는이 코드 줄은 IE7/IE8에서 HTML 개체의 원하는 세트를 생성하지 않는다는 것입니다 :

을

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

IE DOM 검사기를 보면 원하는 태그가 적절하게 중첩되지 않아 DOM이 엉망이되어 스타일 규칙이 제대로 작동하지 않습니다. 문제는 jQuery로 상황을 DOM에 삽입하는 방법이다. IE와의 jQuery 상호 작용 문제라고 생각합니다.

IE에서 코드를 자세히 살펴 보지 않고 실제로 jQuery 문제인지 아니면 IE 문제인지, 아니면 잡종 버그 중 하나인지 여부를 말할 수는 없습니다. 분명히 IE는 이전의 잘못에 대한 첫 번째 비난의 권리를 얻었지만 더 간단한 코드를 사용하여이 버그를 피하는 것이 더 나을 것입니다.

이 코드는 IE7에서 나를 위해 작동합니다. 여기에서는 단일 태그를 만들고 innerHTML을 추가 한 다음 추가 할 HTML 대신 append()를 사용하여 루트 태그를 삽입합니다.

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

현재 수정 된 코드가 작동 볼 수 있습니다 IE는 jQuery를 통해 직접 전체 HTML 문자열을 추가 문제를 가지고 왜 모르겠어요 http://jsfiddle.net/jfriend00/vEST8/

,하지만 내가 전에이 문제를 보았다.

Answer 2

하는 것은 안전을 적용 할 jQuery를 사용하려면 말했다 추가] 후 클래스 :

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