html - 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

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

Answer 3

Margin-top : 6px#photobox 上的修复它在 Firefox 中。

Answer 4

我遇到了同样的问题，（仅限 Firefox）具有相同类型的布局。我发现问题出在导航菜单项上的边距底部，将它们下方的内容 div 推到右侧。

棘手的部分是导航菜单本身在底部没有任何边距，所以看起来它不应该干扰下面的内容（而且它不在其他浏览器中，只是在 Firefox 中） - 但是，在某些时候，我意识到列表项（菜单项）本身确实有延伸到菜单栏下方的边距底部，并且删除它们修复了它。