이미지 링크 높이가 Firefox에서 올바르게 렌더링되지 않습니다.

Question

콘텐츠 슬라이더에 문제가 있습니다. jQuery.Cycle 플러그인을 사용하고 있으며 사용자 정의 페이저로 작동하는 슬라이더를 가져 오기 위해 모든 코드를 설정했습니다. 그러나 HTML에 문제가 있습니다. Internet Explorer 8에서 보았을 때 호출기 버튼이 잘 작동하므로 다음, 이전을 클릭하고 호출기의 이미지 단추를 클릭하여 특정 슬라이드로 이동할 수 있습니다. FireFox에서 볼 때 전체 이미지를 클릭 할 수 없습니다! 각 이미지의 하단 행 픽셀 만 클릭 할 수있는 영역을 활성화합니다.

당신은 [제거]에서 모든 관련 코드를 볼 수 있습니다하지만 난 여기에 대부분의 관련 부분을 강조합니다 :

CSS :

#slider_nav { 
    text-align: center; 
} 

#slider_nav img { 
    margin-top: 1px; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

#slider_pager { 
    display: inline; 
} 

HTML

<div id="sliderControls"> 
    <div class="content"> 
     <div id="slider_nav"> 
      <a href="#" id="slider_prev"><img src="/images/slider_arrow_l.png" alt="slider previous button" /></a> 
      <div id="slider_pager"> 
         <!--- Generated by JQCycle ---> 
         <a href="#"><img src="/images/sliderActive.png" /></a> 
         <a href="#"><img src="/images/sliderInactive.png" /></a> 
         <!--- End generated code ---> 
      </div> 
      <a href="#" id="slider_next"><img src="/images/slider_arrow_r.png" alt="slider next button" /></a> 
     </div> 
    </div> 
</div> 

감사합니다!

Answer 1

#slider이 상대적으로 위치하고 sliderControls과 겹치지 않는 것이 문제입니다. #slider에서 아래쪽 패딩을 제거하여 문제를 해결할 수있었습니다.

#slider { 
    padding: 20px 20px 0 20px; 
    height: 205px; 
}