2012-06-14 2 views
4

Flexslider을 사용하고 있지만 문제가 발생했습니다.Flexslider 이미지 Firefox에서 아주 약간의 잘못된 동작

IT는 demo에서 실제로 볼 수 있습니다. Firefox에서만 발생하거나 적어도 IE9 또는 Chrome에는 표시되지 않습니다. 브라우저의 크기를 약 400-500 픽셀로 다시 조정하고 마지막 두 이미지 (언덕과 새) 사이를 전환 할 때 신중하게 보면 이미지가 픽셀 단위로 약간 위아래로 점프하는 것을 볼 수 있습니다. 스위치. 실제로이 동작을 복제하기 위해 창의 크기를 조정할 때 두 번 이상의 시도가 필요할 수도 있습니다.이 동작은 항상 표시되지는 않지만 적어도 50 %는 수행합니다.

이 내가 아는 아주 작은하지만 나는 1200 픽셀 넓은 슬라이더를 수행 할 때 매우 두드러졌다. 나는 그것이 실제로 내재적이라는 것을 알아챌 때까지 문제를 추적하는데 몇 시간을 보낸다. 내가 발견 그러나 무엇

는 그들이이 문제가 발생하지 않는 이미지 캡션이있는 경우 (A <p> 태그를 사용하는) 것이 었습니다. 방화 광구를 사용하여이를 확인할 수 있습니다.

내 질문은 : 누구든지 p 태그가이 동작을 방지하기 위해 무엇을하는지 알고 있습니까? 그것을 강제로 할 수있는 것은 대단한 일이지만, 나는 그것을 피할 수 있다면 마크 업에서 비 의미가없는 빈 단락 태그를 사용하는 것을 피하고 싶다.

+0

파이어 폭스에서 재현 할 수 없습니다. 어떤 버전을 사용하고 있습니까? – Andy

+0

버전 13 ..보기가 매우 어렵습니다. 마지막 2 개의 이미지에서만 볼 수 있습니다. 여기에 다른 컴퓨터를 사용해 보겠습니다. – byronyasgur

+0

@Andy 사실 저는 고백해야합니다. 예전의 데스크톱에서 파이어 폭스를 사용해 보았습니다. 그리고 실제로 직접 복제 할 수 없었습니다. 하드웨어 문제 일 수도 있습니다. 아마도 FF 플러그인 일 것입니다. 이 질문을 삭제할지 여부에 대한 의견 – byronyasgur

답변

11

CSS에 다음 코드를 추가하여 수정했습니다. 나는 왜 그런지 이해하지 못한다. 그러나 꾸준히 유지되기 위해서는 <li> 태그 (또는 그 내부에 높이가 있는가?) 밖에 있어야 할 것으로 보인다. 목록 스타일을 디스크로 변경해도 작동하지만보기에는 좋지 않습니다.

.slides li:after { 
content: "."; 
position:absolute; 
top:0; 
left:0; 
z-index:-1000; 
} 

편집 : 사실 그 코드가 top:0이 이상한 효과로 bottom:0로 교체 할 경우 약간 더 잘 작동 슬라이더는 달리 부분적으로 화면 밖으로 때 돌아옵니다.

+1

감사합니다! 나는 똑같은 문제가 있었다. Mac OS 10.7.4, Firefox 15.0.1 및 13.something (나는 13.0.1이라고 생각합니다). 당신의 솔루션은 효과가있었습니다! – Nick