접을 수있는 패널 CSS 위치/브라우저 호환성

내 code.it에 브라우저 위치 문제가 있습니다. firefox.but에서 탐색기 내용을 잘 표시합니다. div 아래에 div.pls가 표시되어이 오류를 수정하는 데 도움이됩니다.접을 수있는 패널 CSS 위치/브라우저 호환성

이것은 CSS 코드

<style> 
#colleft { width:175px;float:left; overflow:hidden; background:#333;} 
#showPanel { position:inherit; z-index:2; left:0; float:left; padding-top:40px; display:none; width:0px; height:100px; cursor:pointer;} 
#showPanel span{display:block; font-size:24px; height:30px; margin-top:20px; padding:10px 0 10px 10px; width:20px; background: #333;} 
#colright {color:#1c1c1c; margin-left:175px} 
</style>

이 내 jQuery 코드

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$("#hidePanel").click(function(){ 
$("#panel").animate({marginLeft:"-175px"}, 0); 
$("#colleft").animate({width:"0px", opacity:0}, 0); 
$("#showPanel").show("normal").animate({width:"0px", opacity:1}, 0); 
$("#colright").animate({marginLeft:"0px"}, 0); 
}); 
$("#showPanel").click(function(){ 
$("#colright").animate({marginLeft:"0px"}, 0); 
$("#panel").animate({marginLeft:"0px"}, 0); 
$("#colleft").animate({width:"175px", opacity:1}, 400); 
$("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow"); 
}); 
}); 
</script>

HTML 코드입니다

<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999"> 
     <tr> 
     <td><h1>HEADER GOES HERE</h1></td> 
     </tr> 
     <tr> 
     <td><div id="colleft"> 
     <div id="panel"> 
     <h1>My Panel</h1> 
     <ul> 
     <li>item #1</li> 
     <li>item #2</li> 
     <li>item #3</li> 
     <li>item #4</li> 
     </ul> 
     <div id="hidePanel"><a href="#">&laquo; Hide Panel</a></div> 
     </div> 
     </div> 
     <div id="showPanel"><span>&raquo;</span></div> <div id="colright"> 
     <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#0066CC"> 
      <tr> 
      <td>content div</td></tr> 
     </table></div></td> 
     </tr> 
     <tr> 
     <td><h4>Footer goes here</</td> 
     </tr> 
    </table>

출처

2012-06-15 DAM_86

hidePanel DIV 패널의 DIV 안에 있지만, showPanel DIV DIV 외부에 있습니다. 이것이 맞다는 것이 확실합니까?

출처

2012-06-15 07:04:42

yes.it is.it 잘 firefox.when 내가 클릭 패널에 대한 링크를 클릭하면 탐색기에서 내려갑니다 ... 내 prob이야. –

어떤 버전의 IE를 실행하고 있습니까? 나는 IE7에 있는데 괜찮아 보인다. –

IE 8it에서 작동하지 않습니다. –

원하는대로 작동하지 않는 부분을 자세히 설명해 주실 수 있습니까?

<script type="text/javascript"> 
      jQuery(document).ready(function(){ 
       $("#hidePanel").click(function(){ 
        $("#panel").animate({marginLeft:"-175px"}, 500); 
        $("#colleft").animate({width:"0px", opacity:0}, 400); 
        $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200); 
        $("#colright").animate({marginLeft:"50px"}, 500); }); 
        $("#showPanel").click(function(){ 
        $("#colright").animate({marginLeft:"200px"}, 200); 
        $("#panel").animate({marginLeft:"0px"}, 400); 
        $("#colleft").animate({width:"175px", opacity:1}, 400); 
        $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow"); 
       }); 
      }); 
    </script>

당신은 측면에 작은 버튼이 있고, 당신이 패널에서에게 컨텐츠를 클릭하면이에서 이동 : 당신이 그것을 변경하는 경우 자바 스크립트의 마진은 서로 정말 일치하지 않습니다 왼쪽에서 패널의 내용을 오른쪽으로 밀어 넣습니다.

관련없는 메모에서 표를 사용하여 머리글, 내용 및 바닥 글을 구분한다는 점에 유의했습니다. 이 문제에 도움이되지는 않지만 나쁜 습관으로 간주됩니다. CSS로 그들을 분리하는 것이 좋습니다.

출처

2012-06-15 09:11:49

@ Dirk de Man ur 응답 Dirk.will 곧 솔루션을 확인해 주셔서 감사합니다. 그리고 그 테이블은 물건을 사용합니다. 그렇지만 좋은 습관이 아닙니다.하지만 CSS에 익숙하지 않습니다. 배우기도합니다. –

접을 수있는 패널 CSS 위치/브라우저 호환성

답변

관련 문제