0

私が作成しているサイトは、ChromeとSafariの両方で想定されているとおりにフロントページを表示していますが、Firefoxでテストすると、メニューが正しく表示されません。
-すべてのブラウザは最新バージョンであり、Mac上にあります。

これがFirefoxとSafariをそれぞれ比較したスクリーンショットです！

そして、これが私がメニューに使用するcssコードです。混乱を許してください。

nav {
width: 650px;
height: 220px;
margin: 10px auto;
}

nav ul {
list-style: none;
margin: 0 auto;
display: block;
}

nav ul li {
margin: 10px;
display: inline-block;
height: 100px;
line-height: 200px;
}

さまざまな方法で試しましたが、これにより、動作しているブラウザのメニューが台無しになります。

リクエストに応じて、ナビゲーションバーのHTMLコードは次のとおりです。

<nav>
<ul>
    <li><h2><a href="#cykler.html">Cykler</a></h2></li>
    <li><h2><a href="#service.html">Service</a></h2></li>
    <li><a href="#index.html"><img src="images/logo.png" name="logo" alt="Søgaard Cykler" width="220" height="200"></a></li>
    <li><h2><a href="#info.html">Info</a></h2></li>
    <li><h2><a href="#kontakt.html">Kontakt</a></h2></li>
</ul>
</nav>

そして、ここにjsfiddleで機能しているコードへのリンクがあります：http：//jsfiddle.net/DaCqS/

4

3 に答える 3

0

さて、私はをフロート<li>させ、h2にmargin-top：100pxを使用しました。

これを試して、それで修正されるかどうか教えてくださいhttp://jsfiddle.net/hfxKW/

于 2012-07-09T11:35:36.887 に答える
0

要素の配置には line-height を使用しないことをお勧めします。マージンははるかに効果的です。line-height を取り除き、

margin-top:100px;

ナビまたはULのいずれかで。

編集: HTML が表示されたので...大きな中央のロゴは 4 つのボタンとはスタイルが異なるため、CSS セレクターを分離しておく必要があります。現在の CSS では、これら 4 つのボタンと中央の大きなロゴを区別できません。これをすばやく簡単に修正するには、次のスタイルを追加します。

nav ui li h2 {margin-top:100px;}
于 2012-07-09T10:30:26.417 に答える
0

これはうまくいきますか？http://jsfiddle.net/WWkWw/

.top-menu{
    background-image:url('foo/logo.png');
    height:22px;
}
.left{
    float:left;
}
.right{
    float:right;
}
.top-menu li{
    margin:60px 10px 10px 10px;
    height:100px;
}

HTML:

<nav>
<ul class="top-menu">
<li class="left"><h2><a href="#cykler.html">Cykler</a></h2></li>
<li class="left"><h2><a href="#service.html">Service</a></h2></li>
<li class="right"><h2><a href="#info.html">Info</a></h2></li>
<li class="left"><h2><a href="#kontakt.html">Kontakt</a></h2></li>
</ul>
</nav>
于 2012-07-09T11:39:23.867 に答える