0

我的网站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>

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

提前致谢。

4

1 回答 1

0

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

“问题”是 Firefox 在声明 X 和 Y 坐标时需要显式声明。在几个项目上，您已声明top(Y)，但尚未声明 aleft或right(X)。

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

于 2013-04-12T15:47:14.363 回答