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＆amp;声明一个时的Y坐标。您已声明top（Y）的几个项目，但尚未声明left或right（X）。

添加left:0或其他内容你应该没问题。或者，由于它们是position:relative，您只需将top转换为margin-top。

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

1 个答案: