2017-10-15 4 views
0

내 사이트에 대한 단순한 불투명도 슬라이더를 만들고 Firefox (Chrome 및 Opera에서 완벽하게 처리)에서만 발생하는 이상한 렌더링 버그 (?)가 발생했습니다. 슬라이드가 서로를 변경하면서Firefox에서 렌더링 버그가 발생 했습니까? 텍스트 요소 아래의 불투명도 전환

문제는 그들에 나타나는 수평선이 거기에있다 : Screenshot with horizontal line

분명히 이미지를 전환 화살표와 함께 할 수있는 뭔가가. display: none을 설정하면 선이 표시되지 않습니다.

화살표는 단순한 ><이며 문자 그림자가 있습니다. 텍스트 그림자를 제거하면 줄이 더 얇아집니다. Screenshot with thinner horizontal line

화살표가있는 부분은 슬라이드 컨테이너의 절반을 차지하는 div 안에 절대 위치합니다. 이 div는 다른 div 안에 있으며, 슬라이드에 형제가되고 z-index:1이 있습니다. 범위를 오른쪽/왼쪽으로 설정하면 이미지가 조금 겹치거나 동일한 목적으로 div를 더 얇게 만들면 (예 : 50 % 대신 40 %) 줄이 사라집니다. Screenshot with no line

It 스팬의 너비와 관련이있는 것처럼 보일 수 있지만 max-width 및 display : block 설정은 도움이되지 않습니다.

어떻게이 이상한 줄을 없앨 수 있습니까? 어쩌면 CSS 해킹이있을 수 있습니까? 슬라이더를 직접 확인할 수 있습니다 here. 감사!

+0

script.js 파일이 슬라이더와 상호 작용하는 파일인지 확인하기 위해 비활성화 및 테스트를 시도합니다. 당신의 innerhtml을보십시오. –

답변

0

그래서 저는 span을 제거하고 대신 div 안에 화살표를 넣었습니다. CSS를 해킹하기 전에 this answer에서 세로로 중심을 잡았습니다. 이상한 선과 매력은 좋아하지 않는다. 비록 화살의 앞뒤에 몇 개의 nbsp를 추가해야했기 때문에 슬라이드 컨테이너의 가장자리에 있지는 않았다. 글쎄, 조금 더럽긴하지만 지금은 괜찮아. IE10에서도 작동하며 더 이상 필요하지 않습니다.

관련 문제