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

Question

在为一家餐馆开发一个小型网站时，我偶然发现了在 Firefox 中定位的这个奇怪问题——IE 和 Chrome 完美无缺。

网址：咖啡厅网站

滑块定位为：

#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

There is apparently a confusion with the .header selector, I see it appearing twice in debug mode and it is not exactly the same that is used in firefox.

In firefox, the problem is solved when you uncheck this rule :

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

For some reasons, chrome doesn't get the medium mention. Hope this helps

Answer 5

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

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

也许通过定位浏览器会解决你的问题。添加此代码：

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