0

私のサイトwww.globalplayernetwork.comは、Chrome、Firefox、および IE 10 で動作しますが、IE 9 以前と Opera では動作しません。

ナビゲーション バーとロゴが下に行き過ぎているようです。これを修正するにはどうすればよいですか?

HTML ページ

- ヘッダー

  <section class="overlay">
  &nbsp;&nbsp;&nbsp;&nbsp;<img src="http://www.globalplayernetwork.com/images/GPNLogo.png" height="165" width="590" alt="Global Player Network" title="Global Player Network" /> 
  </section>

- ナビゲーションボタン

  <nav> 
  <ul id="menu" class="menu"> 
  <li> 
  <a href="#" id="contact">
  <span class="active"></span> <span class="wrap"> 
  <span class="link">Contact</span> 
  <span class="descr">
  <font size="2"><b>Get in Touch</b></font></span>
  </span> 
  </a> 
  </li> 
  </ul> 
  </nav>
  </div>

CSS

ul.menu{margin:0;padding:0;list-style:none;font-size:14px;width:auto}
ul.menu a{text-decoration:none;outline:none}

ul.menu li{float:right;width:170px;height:85px;position:relative;cursor:pointer}

ul.menu li > a{position:absolute;top:-440px;right:0px;width:170px;height:78px;z-index:12;background:transparent url(../images/overlay.png) no-repeat bottom right;background-color:rgba(0, 0, 0, 0.75);-webkit-box-shadow:0px 0px 2px #000 inset;-moz-box-shadow:0px 0px 2px #000 inset;box-shadow:0px 0px 2px #000 inset}

ul.menu li a img{border:none;position:absolute;width:0px;height:0px;bottom:0px;left:85px;z-index:100;-webkit-box-shadow:0px 0px 4px #000;-moz-box-shadow:0px 0px 4px #000;box-shadow:0px 0px 4px #000}

ul.menu li span.wrap{position:absolute;top:25px;left:0px;width:170px;height:60px;z-index:15}

ul.menu li span.active{position:absolute;background:rgba(0, 0, 0, 0.75);top:85px;width:170px;height:0px;left:0px;z-index:14;-webkit-box-shadow:0px 0px 4px #000 inset;-moz-box-shadow:0px 0px 4px #000 inset;box-shadow:0px 0px 4px #000 inset;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;border-bottom-right-radius:15px;-moz-border-radius-bottomright:15px;border-bottom-left-radius:15px;-moz-border-radius-bottomleft:15px}

ul.menu li span span.link,ul.menu li span span.descr,ul.menu li div.box a{margin-left:15px;text-transform:uppercase;font-size:33px;text-shadow:1px 1px 1px #000}

ul.menu li span span.link{color:#fff;font-size:22px;float:left;clear:both}

ul.menu li span span.descr{color:#0B75AF;float:left;clear:both;width:155px;font-size:10px;letter-spacing:1px}

ul.menu li div.box{display:block;position:absolute;width:170px;overflow:hidden;height:170px;top:85px;left:0px;display:none;background:#000}ul.menu li div.box a{float:left;clear:both;line-height:30px;color:#0B75AF}

ul.menu li div.box a:first-child{margin-top:15px}ul.menu li div.box a:hover{color:#fff}

ul.menu{margin-top:150px}
4

1 に答える 1

2

まず、HTML5 doctype を設定していないが、次のような HTML5 コードを使用していることです。

<nav> & <section>

これらは、サポートされていないブラウザーによってドロップされます。HTML5 コードを実行する必要がある場合は、古いバージョンの IE 用の HTML5 shim を使用してください。

また、94行目には

</div>

1行目でもあなたは行方不明です

 <html>

そして74行目にあなたが持っています

<span class="descr"><font size="2"><b>Pick Your Spot</span></b></font></span>

スパン、次にフォント、次に太字で開始し、次に順序を逆にして、スパン、次に太字、次にフォントで終了することはできません...ブラケットを適切に開閉する必要があります

正解です：

 <span class="descr"><font size="2"><b>Pick Your Spot</b></font></span>

82行目 タグがありません

基本的に、Firefox では許されていますが、寛容度の低い IE 9 では許されていません。

バリデーターを介して HTML を実行することから始め、欠落しているタグのすべてのエラーを修正します。その後、ページのナビゲーションは自動的に修正されます。

このリンクをチェックしてください：

HTML整頓

于 2013-02-13T01:19:24.810 に答える