在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作爲導航的容器，而不是