html - FF 渲染位置相对于所有其他浏览器不同

Question

我的网站，http://dev.markzanghi.com , 在 Firefox 中呈现不正确，我不知道为什么。

所有其他浏览器，包括 IE 都能正确呈现它。上面的链接会显示错误。基本上，我的标题需要两个部分来制作动画。下面是我的 CSS

/*
TOP BAR
*/

.topbar {
height: 75px;
background: url('../img/headerBGtop.png') repeat-x;
}
.bottomTopBar {
background: url('../img/headerBGbottom.png') repeat-x;
height: 6px;
position: relative;
top: 64px;
}
.topbar .headerWrapper {
max-width: 924px;
margin: 0 auto;
padding: 0 5px;
}
.bottomHeader {
position: relative;
top: -11px;
left: 0px;
z-index: 1;
}
.headerArrowImg {
width: 924px;
overflow: hidden;
}
.bottomFiller {
position: relative;
top: -24px;
background: url(/img/headerBGbottom);
    height: 11px;
}
#leftBottomHeader {
}
#rightBottomHeader {
top: -35px;
}
.logo {
float: left;
margin-top: 13px;
}
.logo img {
height: 55px;
}

.topbarLinks {
float: right;
text-decoration: none;
position: relative;
top: 44px;
z-index: 10;
}

.topbarLinks a{
color: white;
margin-left:25px;
padding: 10px 0px;
}

.topbar .headerArrowImg img {
max-width: none;
position: relative;
left: -200px;
}

和 HTML:

<header>
    <div class="topbar navbar-fixed-top" >
        <div class="headerWrapper">
            <div class="logo">
                <a href="#/"><img src="img/homeLogo.png" /></a>
            </div>
            <div class="topbarLinks">
                <a id="workLink" href="#"><img src="img/workLink.png" /></a>
                <a id="aboutLink" href="#/about"><img src="img/aboutLink.png" /></a>
                <a id="contactLink" href="#/contact"><img src="img/contactLink.png" /></a>
            </div>
            <div id="bottomHeaderWrap" class="bottomHeader">
                <div class="headerArrowImg">
                    <div id="arrowImgWrapper">
                        <img src="/img/headerArrowImg.png" />
                    </div>
                </div>

            </div>
        </div>
        <div id="leftBottomHeader" class="bottomFiller">
        </div>
        <div id="rightBottomHeader" class="bottomFiller">
        </div>
    </div>
</header>

如果有人知道为什么这不起作用，请告诉我!

提前致谢。

Answer 1

不久前，我在菜单动画方面遇到了同样的问题。

“问题”是 Firefox 在声明一个坐标时需要明确声明 X 和 Y 坐标。在多个元素上，您声明了 top (Y)，但尚未声明 left 或 right (X)。

添加一个 left:0 或其他东西，你应该没问题。或者，由于它们是 position:relative，您可以将 top 转换为 margin-top。