我的网站www.globalplayernetwork.com工作在Chrome,火狐,和IE10,但不是在IE9或更早和歌剧。
似乎北约的酒吧和标志太远了。我能做些什么来解决这个问题?
HTML页面
-报头
<section class="overlay">
<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-12 17:19:24
首先,您没有设置HTML5文档类型,但您使用的是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行您丢失了一个标签
基本上,你是被火狐原谅,而不是被IE9原谅,这就不那么宽容了。
首先,通过验证器运行HTML,并修复缺失标记上的所有错误。然后,您的页面导航应该纠正自己。
查看此链接:
https://stackoverflow.com/questions/14844841
复制相似问题