Firefox溢出：隐藏的bug

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

#photobox上的

Margin-top : 6px在Firefox中修复了它。

Answer 4

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

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