Firefox溢出：隱藏的缺陷

Question

因此，我將圖像滑塊添加到我的網頁設計中，就像它現在一樣。它在IE + Chrome中運行良好，但在Firefox中我有一個非常奇怪的問題。圖像滑塊圖像被推向頁面的右側。

當它應該是這樣的：

我真的不知道爲什麼會這樣。

這裏是滑塊的CSS：

<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; 
} 

這是真的絆倒了我。您還可以看到該網站的實時版本 - http://simplesolutions.netne.net/

Answer 1

這是一個浮動的問題：

#slider { float:left } 

應該修復它。

Answer 2

Margin-top : 6px #photobox修復它在Firefox中。

Answer 3

將clear:both添加到#slider .viewer似乎照顧它。

Answer 4

我有同樣的問題，（只有Firefox）具有相同類型的佈局。我發現問題是導航菜單項上的邊緣底部，將其下面的內容div推到右側。

棘手的部分是，導航菜單本身在底部沒有任何餘量，所以它看起來應該不會干擾下面的內容（並且它不在其他瀏覽器中，只是在Firefox） - 但是，在某些時候，我意識到列表項（菜單項）本身確實具有延伸到菜單欄下面的保證金底部，並且刪除它們固定了它。