滑块背景绝对位置 - Firefox错误

Question

为一家餐馆开发一个小型网站我偶然发现了这个奇怪的问题，即定位于Firefox - IE＆amp; Chrome可以完美运行。

网址：Café website

滑块位于：

#new-royalslider-1{
position: absolute;
top: 0;
left: 0;
z-index: -1

非常简单，任何人都可以弄清楚为什么Firefox表现不同？

Answer 1

首先，我认为你应该将滑块放在相对位置并将标题包装放在里面。定位绝对。

如果您不想这样做，可以使用滑块执行position: relative，使用标题包装器执行以下操作

position: absolute;
top: 0;

Answer 2

不确定为什么但似乎html被截断了。所以，我喋喋不休地说：html{float: left}。希望它有所帮助。

Answer 3

现在定义 id #header-wrapper position absolute就像这样

#header-wrapper{position:absolute;top:0;}

并定义 id #wrapper margin-top: 450px; ，就像这样

#wrapper {
    margin-top: 450px;
}

Answer 4

所有浏览器都不会以相同的方式显示网站，即使整体趋于统一，仍有一些细节会被其中一个错误解释。

问题是Firefox，Opera和Safari没有一种方法可以为Internet Explorer分配单独的样式表和特定的注释。

也许通过定位浏览器可以解决您的问题。添加以下代码：

@-moz-document url-prefix()
{
    #new-royalslider-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

Answer 5

.header选择器显然存在混淆，我看到它在调试模式下出现两次，并且与firefox中使用的不完全相同。

在Firefox中，当您取消选中此规则时，问题就解决了：

.header {
    ...
    ...
    border-bottom: medium none;
}

由于某些原因，chrome没有得到medium提及。希望这有帮助