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

Question

为一家餐厅开发一个小网站，我偶然发现了一个奇怪的问题，在Firefox中定位- IE &

URL: cafenet

滑块的位置为:

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

很简单，有人知道为什么Firefox的行为不同吗?

Answer 1

首先，我认为你应该定位你的滑动条相对，并把头部包装。定位绝对。

如果你不想这样做，你可以对滑动条执行position: relative，然后对标题包装器执行以下操作

position: absolute;
top: 0;

Answer 2

不知道为什么，但似乎html被截断了。所以，我安装了firebug: 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的提及。希望对大家有所帮助