在IE 7和8中导航UL

Question

我已经创建了一个网站，几乎已经完成并在Firefox，Chrome，Safari，Opera和IE 9中对它进行了测试，它们的工作方式和外观都一样。

我使用Adobe的浏览器实验室来测试IE8和IE7上的网站，并且一些CSS3被打破，这将会发生，因为它不被支持，但是，我的导航似乎打破了，我无法弄清楚为什么我的知识我正在使用CSS2声明。

要看到我的导航在这里工作是对代码的链接：

http://jsfiddle.net/6SkkP/

或这里是代码：

<div id="container"> 
<!--Start Navigation Section --> 
    <header> 
     <a href="index.html"><img src="http://www.jrk-design.co.uk/gl/images/logo.png" width=245 height=64 alt="Goldie Locks Logo" /></a> 
     <nav> 
      <ul id="main_nav"> 
       <li><a href="index.html" id="index">home<p> a warm welcome</p></a></li> 
       <li><a href="hair.html" id="hair">hair<p>hair extensions</p></a></li> 
       <li><a href="beauty.html" id="beauty">beauty<p>beauty treatments</p></a></li> 
       <li><a href="contact.php" id="contact">contact<p>drop me a line</p></a></li>  
      </ul> 
     </nav> 
    </header> 
    </div>​ 

和我的CSS：

header { 
width: 910px; 
height: 85px; 
} 

header img { 
margin: 24px 0px 0px 0px; 
} 

nav { 
height: 85px; 
float: right; 
text-align: center; 
} 

nav ul#main_nav { 
padding: 0; 
margin: 0; 
} 

nav li { 
display: inline-block; 
width: 132px; 
height: 85px; 
text-decoration: none; 
text-transform: uppercase; 
} 

nav li a { 
display: block; 
width: 132px; 
height: 30px; 
color: #b06e28; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 16px; 
padding: 55px 0px 0px; 
} 

nav li a p { 
font-style: italic; 
font-size: 14px; 
color: #858585; 
text-transform: lowercase; 
padding: 0; 
margin: 0; 
} 

a#index { 
background-image: url(http://www.jrk-design.co.uk/gl/images/index_nav.png); 
} 

a#hair { 
background-image: url(http://www.jrk-design.co.uk/gl/images/hair_nav.png); 
} 

a#beauty { 
background-image: url(http://www.jrk-design.co.uk/gl/images/beauty_nav.png); 
} 

a#contact { 
background-image: url(http://www.jrk-design.co.uk/gl/images/contact_nav.png); 
} 

ul#main_nav li a:hover { 
color: #4c4c4e; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 16px; 
background-position: 0; 
} 

body.index ul#main_nav li a#index { 
background-position: 0; 
} 

body.hair ul#main_nav li a#hair { 
background-position: 0; 
} 

body.beauty ul#main_nav li a#beauty { 
background-position: 0; 
} 

body.contact ul#main_nav li a#contact { 
background-position: 0; 
} 

这是我的导航应该看起来像：

这里是如何呈现在IE7：

和IE8：

另外，我使用的是HTML5 SHIV

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 

任何人都可以照亮我的情况吗？

谢谢你们。

Answer 1

如果以上不工作，只是不使用导航标签，只是添加一个＃使其成为一个div。然后把HTML中的div，

<div id="nav"> 

等

Answer 2

我不确定IE7/8是否处理导航标记。尝试添加shiv以查看是否可以解决它。

<!--[if lt IE 9]> 
<script src="dist/html5shiv.js"></script> 
<![endif]--> 

如果没有，你可能需要更改导航是再更新CSS的资产净值将.nav

Answer 3

以上两个答案都是对的，我想一件事添加到

nav li { 
display: inline-block;} 

IE7不支持inline-block财产如此尝试

nav li {display:block; float:left}或一些回落ie7

Answer 4

如果我是你，我会使用div作为导航的容器，而不是