0

私のウェブサイトhttp://dev.markzanghi.comは、Firefox で正しく表示されません。理由がわかりません。

IE を含む他のすべてのブラウザーは、正しくレンダリングします。上記のリンクは間違いを表示します。基本的に、アニメーションのヘッダーには 2 つの部分が必要です。以下は私の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 座標の両方が宣言されている場合、明示的に宣言する必要があることです。いくつかの項目で(Y) を宣言しましたが、または(X)topを宣言していません。leftright

a または何かを追加するleft:0と、問題ないはずです。または、それらはposition:relativeであるため、単に に変換できtopますmargin-top。

于 2013-04-12T15:47:14.363 に答える