除了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