質問

私は私の人生のために、私は解決することができ非常に奇妙な問題を抱えています。基本的には、Safariで私の上部のナビゲーションには上マージンを持っていないと、ページの最上部と同一平面です。 Firefoxでは、それは私が理解できない理由で、同様にトップに下の余白を適用しています。私は放火犯に余白を削除すると、偽の上マージンも削除されます。

、ちょうど私が何を意味するか表示するには、Firefoxでページを後藤ください。あなたは放火犯を持っている場合は、#メインナビゲーションにmarginプロパティを無効にして、あなたは何が起こっているかがわかります。

編集:サイトへのリンクが含まれるように忘れ:リンクする

ここでは、コードです。

<body>
  <div id="page-wrap">
    <ul id="main-navigation">
     <li><a href="/" id="home-link<?php if (is_home()) { echo '-active'; } ?>" class="main-nav-link">Home</a></li>
     <li><a href="/is" id="about-link<?php if (is_page("About")) { echo '-active'; }  ?>" class="main-nav-link">About</a></li>
     <li><a href="/discusses" id="articles-link<?php if (is_page("Articles")) { echo '-active'; } if (is_single()) { if (in_category( 3, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Articles</a></li>
     <li><a href="/does" id="portfolio-link<?php if (is_page("Portfolio")) { echo '-active'; } if (is_single()) { if (in_category( 4, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Portfolio</a></li>
     <li><a href="/listens" id="contact-link<?php if (is_page("Contact")) { echo '-active'; } ?>" class="main-nav-link">Contact</a></li>
     <li><a href="/rss" id="feeds-link" class="main-nav-link">Feeds</a></li>
     <div class="clear"></div>
    </ul> 

とCSSます:

body {
 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Trebuchet, sans-serif; font-size: 13px; color: #2a2a2a;
 border-top: 4px solid #f2f2f2;
 }

#page-wrap { width: 600px; margin: 0 auto; }

#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 48px -10px; }
 #main-navigation li { float: left; height: 30px; }
  #main-navigation li a { display: block; cursor: pointer; margin-right: 28px; height: 30px; text-indent: -9999px; background: url(/images/storminkSprite.png) no-repeat; background-color: transparent; }
私は本当にもう何をすべきか見当がつかない

、私は一日中、この一つの問題を解決しようとしてきたと私はアイデアから完全ので、私は本当に誰かが助けることができると思います。

役に立ちましたか?

解決

マージン可否はしかし...クイックフィックスは、パディング可否を追加することですwierd..itは、コードで何かでなければならない行動しているようです。

#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 0 -10px; padding-bottom:48px; }

これは私には正常に動作します。

他のヒント

#main-navigation {margin-bottom:0px!important;}

あなたが使用して試みることができる。

padding-bottom: 45px and margin-left: -10px

私は余裕がそれをやっているが、この迅速な回避策は問題ないはずです理由として見当もつかないます。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top