除了Opera和IE9或更早版本之外，網站是否適用於所有瀏覽器

Question

我的網站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}

Answer 1

首先，您不是在設置HTML5文檔類型，而是使用HTML5代碼，例如

<nav> & <section>

這些將被不受支持的瀏覽器刪除。 如果你必須運行HTML5代碼，那么對舊版本的IE使用HTML5墊片。

另外，在第94行你有

</div>

也在第1行，你錯過了

 <html>

在第74行你有

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

你不能先用span，然后是font，然后是粗體，然后反轉順序並以span結束，然后是粗體，然后是font ...你需要正確打開和關閉括號

這是對的：

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

第82行你有一個丟失的標簽

基本上你被firefox原諒了，但不是IE 9的原諒。

首先通過驗證器運行HTML並修復丟失標簽上的所有錯誤。 然后您的頁面導航應該自行糾正。

檢查此鏈接：

HTML整潔

除了Opera和IE9或更早版本之外，網站是否適用於所有瀏覽器

問題描述

1 個解決方案

解決方案1
2 2013-02-13 01:19:24

除了Opera和IE9或更早版本之外，網站是否適用於所有瀏覽器

問題描述

1 個解決方案

解決方案1 2 2013-02-13 01:19:24

解決方案1
2 2013-02-13 01:19:24