디스플레이가있는 중첩 된 HTML 요소 : IE8에서 아무런 동작도하지 않습니다.

요소가 포함 된 <article> 요소에서 페이드 인하려면 jQuery를 사용하고 있습니다.디스플레이가있는 중첩 된 HTML 요소 : IE8에서 아무런 동작도하지 않습니다.

외부 요소는 display:none, position:fixed 및 z-index:5입니다. 내부 요소는 position:absolute입니다.

기본적으로 기사는 프레임을 제공하고 내부 섹션은 내용을 보유하고 스크롤 막대를가집니다.

외부 요소가 희미 해지고 내부를 따라갈 것으로 예상됩니다.

IE9 +, FF 및 Chrome에서 예상대로 작동합니다.

IE8에서는 그렇지 않습니다. 바깥 쪽 기사가 전혀 사라지지 않는 - 보이지 않는 채로 있고 안쪽 섹션이 브라우저 프레임을 기준으로 배치되어 항상 표시됩니다. 페이지의 다른 요소는 모두 비뚤어지고 페이지는 대부분 비 기능적입니다.

코드 샘플 : 아래

article 
{ 
    display: none; 
    position: fixed; 
    z-index: 5; 
} 

section 
{ 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    bottom: 10px; 
    left: 10px; 
    overflow: auto; 
}

및

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <article id="contentFrame"> 
     <section id="content"> 
     Lorem Ipsum 
     </section> 
    </article> 
    </body> 
</html>

및

$("#contentFrame").fadeIn(2000);

출처

2011-09-19 Ozzah

당신은 jsFiddle를 제공 할 수 있습니까? – Headshota

http://jsfiddle.net/vXVQs/ – Ozzah

IE8과는 article 및 section 같은 HTML5 태그를 지원하지 않습니다.

HTML5 elements CSS & Javascript interaction in IE8 and below

HTML5 elements in Internet Explorer: runtime insertion

출처

2011-09-19 05:45:32

기사/섹션 태그를 대체하는 div로 새 jsFiddle을 만들었습니다. 이제는 더 잘 작동하지만 내부 div는 외부 div의 현재 불투명도에 관계없이 항상 볼 수 있습니다. 참조 : http://jsfiddle.net/MBNsd/ – Ozzah

이것은 애니메이션이 IE에서 작동하는 방식입니다. http://jsfiddle.net/E5wGq/3/ - 예상대로 작동합니다. 첫 번째 지연은 주목할만한 것으로 추가되었습니다. –

그래, 할 수있어. 그러나 이것은 매우 단순화 된 예입니다. 내 실제 페이지에는 #e 섹션 안에 수십 개의 레벨로 무수히 많은 중첩 요소가 있습니다. 각 레벨의 각 요소를 fadeIn()해야합니까, 아니면 #eSection이 position : absolute로 IE가이 작업을 수행하기 때문입니까? 나는 모든 위치 fadeIn()해야합니까 : 절대 자손? – Ozzah

디스플레이가있는 중첩 된 HTML 요소 : IE8에서 아무런 동작도하지 않습니다.

답변

관련 문제