BxSlider 활성 도트가 나머지 도트와 정렬되지 않음

-1

다음 사이트가 있습니다 here, 회전식 도트의 점을 클릭하면 활성 점이 몇 픽셀 씩 위로 이동합니다. 제거하면 dev 도구에서BxSlider 활성 도트가 나머지 도트와 정렬되지 않음

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { 
    background: #0e2240; 
}

패딩, 마진, 높이, 도트의 폭이 남아 : 활성 클래스는, 그 다음과 같은 나는 내가 .active 클래스에 부착 한 전용 속성으로이 원인이 뭐죠 확실하지가 제대로되어 다시 정렬 똑같다.

나는 위치의 이동이 일어나는 이유에 대한 디버깅 드릴 수 없습니다

<div class="bx-pager bx-default-pager"> 
     <div class="bx-pager-item"> 
      <a class="bx-pager-link active" data-slide-index="0" href="">1</a> 
     </div> 
     <div class="bx-pager-item"> 
      <a class="bx-pager-link" data-slide-index="1" href="">2</a> 
     </div> 
     <div class="bx-pager-item"> 
      <a class="bx-pager-link" data-slide-index="2" href="">3</a> 
     </div> 
    </div>

, 누군가가 올바른 방향으로 날 지점하시기 바랍니다 수 있습니다 다음 bxSlider 컨트롤의

html로는 다음과 같다? 버그의

스크린 샷 :

편집 : 그것은 내가 .active 클래스를 제거 것처럼 inline-block에 문제가 될 것으로 보인다 does't는 모든 것이 잘 작동합니다.

출처

2017-11-24 Alexander Solonik

vertical-align:middle ~ .bx-wrapper .bx-pager-item 클래스 만 지정하십시오.

.bx-wrapper .bx-pager-item {  
    vertical-align: middle; 
}

출처

2017-11-24 08:25:35

체크 스타일링

.bx-pager.bx-default-pager a.active {} 
and 
.bx-pager.bx-default-pager a {} 

has same css except background-color

출처

2017-11-24 08:43:28

BxSlider 활성 도트가 나머지 도트와 정렬되지 않음

답변

관련 문제