jQuery 슬라이더가 IE에서 작동하지 않습니다

내 코드는 IE를 제외한 모든 브라우저에서 완벽하게 작동합니다. 나는 행운과 포럼에서 찾을 수있는 모든 솔루션을 시도. 나는 여전히 자바 스크립트를 배우기 때문에 나중에 jQuery를 배우게됩니다. 문제는 IE에서 슬라이드가 효과없이 세로로 나타납니다. 여기 내 스타일 시트입니다jQuery 슬라이더가 IE에서 작동하지 않습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <link href="stylesheet...css" rel="stylesheet" type="text/css" /> 

    <title>div test</title> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="jquery.bxSlider.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      var slider = $('#slider1').bxSlider({ 
       controls: false 
      }); 

      $('#bx-prev').click(function() { 
       slider.goToPreviousSlide(); 
       return false; 
      }); 

      $('#bx-next').click(function() { 
       slider.goToNextSlide(); 
       return false; 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <div id="slider1"> 
     <div> 
      <div id="wrapper"> 
       <div id="head"><img alt="logo" align="left" src="logo.png"/></div> 
       <div id="main"> <div id="content">content</div> </div> 
       <div id="rash"><img alt="r" align="middle" 
            style="position:relative;top:-70px;" 
            src="image1.png"/></div> 
       <div style="clear:both"></div> 
      </div> 
     </div> 
     <div> 
      <div id="wrapper"> 
       <div id="head"><img alt="logo" align="left" src="logo.png"/></div> 
       <div id="main"> <div id="content">content</div> </div> 
       <div id="rash"><img alt="r" align="middle" 
            style="position:relative;top:-70px;" 
            src="image1.png"/></div> 
       <div style="clear:both"></div> 
      </div> 
     </div> 
     <div>page3</div> 
     <div>page4</div> 
    </div> 
    <div id="bx-next">next</div> 
    <div id="bx-prev">prev</div> 
</body> 
</html>

그리고 :

div#head { 
    width:100%; 
    height:100px; 
    /*background-color:antiquewhite;*/ 
    margin-bottom:100px; 
} 

div#content { 
    border-left: 2px solid #F0F8FF; 
    border-right: 2px solid #8a815d; 
    border-top: 2px solid #8a815d; 
    border-bottom: 2px solid #8a815d; 
    width:400px; 
    height:300px; 
    -webkit-border-radius: 0px 28px 20px 0px; 
    -moz-border-radius: 0px 28px 20px 0px; 
    border-radius: 0px 28px 20px 0px; 
    font-family:Arial,Helvetica,sans-serif; 
    color:#8a815d; 
    padding-left:100px; 
    background-color:#F0FFFF; 
    background-color: rgba(215,227,211,0.3); 
    position:relative; 
    top:20px; 
    left:0px 
} 


div#wrapper { 
    width: 100%; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    padding: 0px; 
} 

div#main { 
    /* background-color:black;*/ 
    width:50%; 
    height:360px; 
    float:left; 
} 

div#rash { 
    float:right; 
    /*background-color:blue;*/ 
    height:360px; 
    width:50%; 
} 

body { 
    background-color: #E8F3F9; 
    background-image: url('squares layer.png'); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
} 

/*next button*/ 
#bx-next { 
    position:absolute; 
    top:45%; 
    right:3px; 
    z-index:998; 
    width: 30px; 
    height: 30px; 
    text-indent: -999999px; 
    background: url(gray_next.png) no-repeat 0 -30px; 
} 

/*previous button*/ 
#bx-prev { 
    position:absolute; 
    top:45%; 
    left:4px; 
    z-index:998; 
    width: 30px; 
    height: 30px; 
    text-indent: -999999px; 
    background: url(gray_prev.png) no-repeat 0 -30px; 
}

출처

2012-05-10 Mohamed Nabil Eldeeb

콘솔에 오류가 있습니까? jsfiddle.net에 코드를 게시 할 수 있습니까? – jbabey

JS 코드가 유효 함을 나타냅니다 –

이 플러그인에 올바른 html 구조를 구현하지 않았다고 생각합니다 ...이 플러그인을 구현하기위한 단계를 따르십시오. http://bxslider.com/ – SaurabhLP

나 또한 비슷한 문제가 있습니다, 그리고 나는 아직하지만 난 알아 낸 것과 결론에 도달하지 않은 여기 내 코드입니다 지금까지이 문제를 디버깅하여 코드 유효성 검사를 시작해야합니다. http://validator.w3.org/ 나는 당신의 코드를 복사했고 5 개의 오류가있어서 IE가 매우 까다 롭고 서식에 영향을 줄 수있는 오류가 있다면 시작하는 것이 이러한 오류를 수정한다고 생각한다고합니다. 또한 나는 IE가 코드 상단의 Doc Type에 대해 까다 롭다는 것을 알고 있으며, 올바른 것이 아니라면 페이지의 포맷팅에도 영향을 줄 수 있습니다. 비슷한 문제가 발생할 수있는 경우, 문제를 해결할 가능성이 가장 높기 때문에 알려 드리겠습니다.

출처

2013-09-13 16:50:30 Drew

<div id="wrapper">은 두 번 정의됩니다. ID는 페이지의 모든 요소에 대해 고유해야합니다. <div id="head">, <div id="main">, <div id="content"> 및 <div id="rash">에 대해서도 동일합니다.

또한 IE 콘솔에서 디버깅 해 보셨습니까? 런타임시 콘솔에 오류가 기록되는지 확인하십시오. 그런 다음 SO로 돌아가서 그 오류를 게시하십시오.

건배.

출처

2014-03-13 07:45:14 DeeKayy90

jQuery 슬라이더가 IE에서 작동하지 않습니다

답변

관련 문제