IE에서 jquery의 fadeIn 및 fadeOut 메소드가 실패하는 버그

<p>BUG1:절대 위치 지정중첩 절대 위치 지정

<p>이 문제는 메모를 하지 않았기 때문에 매번 반나절 동안 공부해야 했습니다. 좋은 기억이 나쁜 글쓰기보다 더 나쁘다는 것은 절대적으로 사실입니다.

<p id="show_list">
      <p class=""  val="0">
           <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p>  
           <p  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </p>
       </p>

　　　　<p class=""  val="0">
           <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p>  
           <p  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </p>
       </p>

<p>

<p>posab은 절대 위치 지정 클래스입니다

<p>절대 위치 지정을 floating으로 대체하면 페이드 인 및 아웃 효과를 얻을 수 있습니다.

      

           
 
  
           

                
测试测试测试
                
测试测试测试
                
测试测试测试
           

       
       

　　　　

           
 
  
           

                
测试测试测试
                
测试测试测试
                
测试测试测试
           

       
       

<p>

<p> 특정 위치를 조정해야 합니다.

<p>BUG2: 상위 절대 위치 지정이 상위 크기보다 큰 이미지를 중첩합니다.

<p>IE8 고유의 버그인 또 다른 상황이 있습니다. 형식은 다음과 같습니다.

 <p class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
  <img class="png_bg" src="image.jpg" />
</p>

<p> 사진 크기가 p 크기를 초과하면 IE8에서는 페이드 아웃 효과가 무효화됩니다.

<p>BUG3:

<p>인터넷에 버그가 있습니다. 구체적으로 지금 게시하겠습니다.

IE6 IE7 IE8 fadeIn() fadeOut() position : 상대

<p>예제를 먼저 살펴보겠습니다

    <p>
        <p>I am going to fade in ;
        <p>I am going to fade in ;

    


$('.fadein').fadeIn();

<p>

<p>위 코드는 기본적으로 예상한 결과를 얻을 수 있습니다. 모든 주류 브라우저의 결과

<p> 그러나 현실은 잔인합니다. 물론 모든 사람의 HTML 구조는 그렇게 간단하지 않습니다.

<p>조금 추가해보겠습니다

<style>
.relative{position: relative;}
</style>

    

        <p>I am going to fade in ;
        <p>I am going to fade in ;

    


$('.fadein').fadeIn();

<p> 이때 IE 6 78에서는 아빠 같은 것이 나오는데, animation은 나오지 않나요?

<p>이것은 악명 높은 IE 버그입니다. fadeIn 요소의 하위 요소에 position 속성이 있으면 상대 값이 가장 심각합니다. position 속성이 있는 요소는 fadeIn 효과를 갖지 않습니다.

가능한 곡선 솔루션:

<p>1, 위치 없음: 상대; 때때로 수행될 수 있습니다.

<p>2. 작성자가 직면한 상황과 같이 1이 실제로 불가능할 경우 각각()을 사용하십시오. 이 효과는 하나씩 수행할 수 있지만 효율성이 너무 낮고 사용자의 컴퓨터가 중단될 수 있습니다. 예를 들어 제가 겪은 상황에서는 하위 요소가 수십 또는 수백 개 있습니다. 이 방법은 수만번을 해도 아무 일도 일어나지 않도록 하세요. .

Targeted Solution

<p>우리는 position:relative를 사용하지 않고 Each()를 사용하지 않고 이 효과를 얻고 싶습니다. 괜찮을까요?

<p>그렇습니다!

<p>버그이므로 해킹 방법이 있어야 합니다

$('.fadein').css('position', 'relative').fadeIn();

<p> fadeIn() 전에 위치 속성을 상대 속성으로 동적으로 변경하면 IE7에서 이 버그가 해결됩니다.

<style>
.relative{position: relative; filter: inherit}
</style>

<p>자식 요소에 위치 속성이 있는 경우 필터를 추가할 때 : 상속; 요소에는 현재 요소의 첫 번째 수준 하위 요소도 추가되어야 합니다.
이 두 가지가 결합되면 IE678의 문제는 해결될 것입니다

<p>

위 내용은 IE에서 jquery의 fadeIn 및 fadeOut 메소드가 실패하는 버그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!