的CSS圖像翻轉鏈接的問題 - 不能讓導航在IE

Question

水平顯示

是的，我已經開出空白的這一個，並播放有關與它一點的CSS是不是因爲我是整齊後我喜歡它。導航/翻轉圖像以我想要的方式在Firefox中工作，但我無法在IE中使用它。 IE基本上將翻轉鏈接堆疊在彼此之上。 http://www.plumberkendal.co.uk < ---它上傳到這裏，你可以看看我的意思。

1）display：inline; ///似乎殺死了IE和FF中的鏈接。

2）顯示：內聯塊; ///這就是它現在設置太多，它似乎工作FF和鉻但不IE。任何幫助非常感謝！

CSS

#nav_bar 
{ 
margin-top: 10px; 
float: right; 
} 

#navigation li, #navigation a 
{ 
height:32px; display: inline-block; 
} 

#navigation li 
{ 
margin:0; padding:0; 
list-style: none outside none; 
display: inline-block; 
} 

#home li, #home a{width: 90px;} 
#home{left: 0px; width: 90px;} 
#home {background: url('../images/nav_bar.png') 0 0; } 
#home a:hover {background: url('../images/nav_bar.png') 0 -39px; } 

#portfolio li, #portfolio a {width: 128px; } 
#portfolio {left: 91px; width: 128px; } 
#portfolio {background: url('../images/nav_bar.png') -94px 0px; } 
#portfolio a:hover{background: url('../images/nav_bar.png') -94px -39px;} 

#contact li, #contact a {width: 90px; } 
#contact {left: 130px; width: 90px; } 
#contact { background: url('../images/nav_bar.png') -306px 0px; } 
#contact a:hover {background: url('../images/nav_bar.png') -306px -39px; } 

HTML

<div id="nav_bar"> 

<ul id="navigation"> 

<li id="home"><a href="index.php"><span>home</span></a></li> 
<li id="portfolio"><a href="portfolio.php"><span>portfolio</span></a></li> 
<li id="contact"><a href="contact.php"><span>contact</span></a></li> 
</ul>   

</div> 

Answer 1

嘗試使用此代碼（沒有測試過，但我認爲它應該工作）：

#nav_bar   { margin-top: 10px; float: right; } 
#navigation   { overflow:hidden; } 
#navigation li  { float:left; margin:0; padding:0; list-style: none outside none; background-image:url('../images/nav_bar.png'); } 
#navigation a  { display:block; height:32px; } 
#navigation a:hover { background-image:url('../images/nav_bar.png'); } 

#home    { background-position:0 0; } 
#home a    { width:90px; } 
#home a:hover  { background-position:0 -39px; } 

#portfolio   { background-position:-94px 0; } 
#portfolio a  { width:128px; } 
#portfolio a:hover { background-position:-94px -39px; } 

#contact   { background-position:-306px 0; } 
#contact a   { width:90px; } 
#contact a:hover { background-position:-306px -39px; }