Firefox 오버 플로우 : 숨겨진 버그

Question

그래서 이미지 슬라이더를 지금 내 웹 디자인에 추가했습니다. 그것은 IE + 크롬에서 잘 작동했지만 파이어 폭스에서 나는 매우 이상한 문제가 발생했습니다. 이미지 슬라이더 이미지가 페이지의 오른쪽으로 밀려났습니다.

은 다음과 같아야합니다

:

이런 일이 왜 난 정말 모르겠어요.

<style type="text/css"> 
     #slider { 
      position: relative; 
      width: 918px; 
     } 
     #slider .viewer { 
      position: relative; 
      width: 918px; 
      height: 200px; 
      overflow: hidden !important; 
     } 
     #slider .viewer .reel { 
      display: none; 
      height: 200px; 
     } 
     #slider .viewer .reel .slide { 
      width: 918px; 
      height: 200px; 
     } 
    </style> 

그리고 슬라이더 주변에 컨테이너의 CSS :이 정말 날 유세입니다

#photobox { 
border-left: 1px solid #ababab; 
border-right: 1px solid #ababab; 
position: relative; 
width: 918px; 
height: 200px; 
z-index: -1; 
top: -6px; 
} 

여기

슬라이더의 CSS입니다. #photobox가 Firefox에서 수정 한 사이트의 실시간 버전 - http://simplesolutions.netne.net/

Answer 1

이 떠있는 문제입니다.

Answer 2

Margin-top : 6px을 볼 수도 있습니다.

Answer 3

clear:both에서 #slider .viewer까지 추가하는 것이 좋습니다.

#slider { float:left } 

이 문제를 해결해야합니다

Answer 4

동일한 유형의 레이아웃을 사용하는 동일한 문제 (Firefox에만 해당)가 있습니다. 문제는 nav 메뉴 항목에서 margin-bottom으로, 오른쪽 아래에서 내용 div를 아래로 밀어내는 것으로 나타났습니다.

까다로운 부분은 탐색 메뉴 자체가 아래쪽에 여백이 없기 때문에 아래 내용을 간섭해서는 안되는 것처럼 보였습니다 (다른 브라우저에서는 볼 수 없었습니다. 파이어 폭스) - 그러나 어느 시점에서 나는 목록 항목 (메뉴 항목) 자체가 메뉴 막대 아래로 확장 된 여백 바닥을 가지고 있고 그것을 고치면서 그것을 고정 시켰다는 것을 깨달았다.