导航栏在IE6、7、8中无法正常显示，但在9和所有其他浏览器上均可
[英]Navigation bar not displaying well in IE6,7,8 but works on 9 and all other browsers
问题描述
[www.tdeltd.net][1] 
[www.tdeltd.net] [1]
[1]: http://tdeltd.net is my site. [1]： http : //tdeltd.net是我的网站。 The navigation bar is broken in all versions of IE except 9. All other browsers display the site properly. 除了9之外，所有版本的IE的导航栏均已损坏。所有其他浏览器均可正确显示该站点。 After two days of searching I am posting here as I cant find the solution. 经过两天的搜索，我无法找到解决方案，所以在这里发布。 I get two errors on w3c validation but they are not relevant to the header and nav tags that the breakage is taking place within. 我在w3c验证中遇到两个错误，但它们与发生损坏的标头和nav标签无关。 I see some javascript related to IE versions in the head that point to files that do not exist. 我在头部看到了一些与IE版本相关的javascript，它们指向不存在的文件。 I am not sure where to get these. 我不确定从哪里得到这些。 This design came from a template. 此设计来自模板。 CSS validated without errors so I am not sure where to put focus to try to fix ie6, 7 and 8 problems. CSS验证没有错误，因此我不确定将重点放在尝试修复ie6、7和8的问题上。
CSS for the header: 标头的CSS：
/* Header */
header {
height:262px;
position:relative;
}
/*===== header =====*/
header nav {
height:50px;
background:url(../images/nav-tail.gif) repeat-x left top;
position:absolute;
right:49px;
top:201px;
width:988px;
}
header nav ul li {
float:left;
}
header nav ul li a {
font-size:1.273em;
line-height:1.2em;
font-weight:bold;
color:#fff;
text-decoration:none;
display:block;
padding:17px 20px 14px 20px;
}
header nav ul li a:hover,
header nav ul li.current a {
background-color:#df5b03;
border-bottom:13px solid #0065a4;
}
HTML is easily seen on the web by "get source" in ones browser. 通过浏览器中的“获取源代码”，很容易在Web上看到HTML。 My challenge is that I only have a mac at my disposal and have to rely on others for feedback on breakage. 我面临的挑战是，我只有一台Mac可供使用，并且必须依靠其他人来提供有关损坏的反馈。 Can anyone help guide me to a problem area or any potential ideas as to why this looks perfect on anything except previous version of IE? 任何人都可以帮助我找到问题区域或任何潜在的想法，以了解为什么这对除早期版本的IE以外的任何内容都很完美？ Many thank you's in advance! 非常感谢您！
Daryl 达里尔
Thanks again for everyones help. 再次感谢大家的帮助。 Adding the html5shiv to the head section was a definite fix. 将html5shiv添加到头部是肯定的解决方法。 Stack Overflow is great! 堆栈溢出很棒！ Very glad I signed up and posted. 很高兴我注册并发布。 My problem was solved within one hour. 我的问题在一小时内解决了。 Took me longer to test and confirm than it did to get rock solid answers. 我花了更长的时间进行测试和确认，而不是获得确切的答案。 Thanks again! 再次感谢！
4 个解决方案
解决方案1
0 2011-09-29 13:44:23
Older versions of IE do not support custom tags, such as the <nav> you have used. 较旧版本的IE不支持自定义标记，例如您使用的<nav> 。 Use <div class="nav"> instead for browser compatibility. 使用<div class="nav">代替浏览器兼容性。
解决方案2
0 已采纳 2011-09-29 13:45:56
解决方案3
0 2011-09-29 13:46:00
Ie versions less than 9 do not natively support html 5 elements like "nav." 即小于9的版本本身不支持html 5元素，例如“ nav”。 However, the fix is easy. 但是，修复很容易。 By some weird quirk, if you create the element via JS (you don't even have to insert it into the DOM), IE will now know it exists and be able to style it. 奇怪的是，如果您通过JS创建元素（甚至不必将其插入DOM），IE现在就会知道它的存在并能够对其进行样式设置。
So in your <head> , do this for each html5 element type you are using: 因此，在您的<head> ，对您使用的每种html5元素类型执行此操作：
<!--[if lt IE 9]>
<script>
document.createElement('nav');
//ditto for other html5 elements
</script>
<![endif]-->
解决方案4
0 2011-09-29 13:54:06
HTML 5 elements are not available below IE 9. HTML 5元素在IE 9以下不可用。
The following code will fix that: 以下代码将解决此问题：
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/ http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
<!--[if lt ie 9]>
<script>
document.createElement('nav')
<script>
<style>
nav{display:block}
</style>
<[endif]-->
Remember, it's important to style the tags after you create them in IE. 请记住，在IE中创建标签后，对标签进行样式设置很重要。
Your best bet is to use htmlshim, which is hosted on google code and likely cahched on the person's browser already: 最好的选择是使用htmlshim，它托管在Google代码中，并且很可能已经在该人的浏览器中安装了：
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Best performance is to put that in the head after the CSS. 最佳性能是放置在头部的CSS 后 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.