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结束，然后是粗体，然后是字体......你需要正确打开和关闭括号

这是正确的：

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

第82行你有一个缺失的标签

基本上你是被firefox原谅了，但不是因为IE 9而不能原谅。

首先通过验证程序运行HTML并修复缺失标记上的所有错误。然后您的页面导航应该自行纠正。

查看此链接：

HTML Tidy

除了Opera和IE9或更早版本之外，网站是否适用于所有浏览器

1 个答案: