網站適用於所有瀏覽器，但Opera和IE9或更早版本？

我的網站www.globalplayernetwork.com適用於Chrome，Firefox和IE 10，但不適用於IE 9或更早版本以及Opera。網站適用於所有瀏覽器，但Opera和IE9或更早版本？

看起來導航欄和標誌太遠了。我可以嘗試解決這個問題？

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}

來源

2013-02-13 user1667125

職位導航欄和標識 – Supplement 2013-02-13 01:12:14

它看起來像你的網站上的一些代碼有一些[HTML]（http://validator.w3.org/check？ uri = http％3A％2F％2Fwww.globalplayernetwork.com％2F＆charset =％28detect + automatically％29＆doctype = Inline＆group = 0）and [CSS]（http://jigsaw.w3.org/css-validator/validator?uri= http％3A％2F％2Fwww.globalplayernetwork.com％2F＆profile = css3＆usermedium = all＆warning = 1＆vextwarning =＆lang = en）錯誤。嘗試修復這些，看看會發生什麼？ – Michael0x2a 2013-02-13 01:17:04

謝謝你們，會做！ – user1667125 2013-02-13 02:27:57

的第一件事是，你是不是設置一個HTML5的doctype，但使用的是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>

你不能以跨度開始，那麼f ONT，然後大膽，再顛倒順序，並與跨度終點，那麼大膽，那麼字體......你需要打開和正常關閉您的括號

這是正確的：

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

線82你有一個丟失的標籤

基本上你被firefox原諒，但不是由IE 9這是寬容。

首先通過驗證程序運行您的HTML並修復缺失標籤上的所有錯誤。然後你的頁面導航應該自行更正。

檢查此鏈接了：

HTML Tidy

來源

2013-02-13 01:19:24 Zuriel

您忘記提及字體標記在HTML4中折舊並且在HTML5中不受支持。應該使用CSS樣式。 – 2013-02-13 01:32:10

謝謝，看起來我還可以添加一個名爲shiv的HTML5 for IE 7及更低版本。我會盡我所能修復它，再次感謝你！ – user1667125 2013-02-13 02:27:39

網站適用於所有瀏覽器，但Opera和IE9或更早版本？

回答

相關問題