CSS使用圖像來代替水平菜單鏈接，但在IE7中消失

Question

經過了很長時間的嘗試，我還沒有接近任何東西，我不知道如何使這個網站的菜單（找到here）我已經出現在IE7。

我正在使用css圖像替換技術來實現這個結果，目前我有一個帶有鏈接的html菜單，並用css中的圖像替換鏈接。

您能否幫我解答謝謝。

這裏是CSS

'@charset "utf-8"; 
/* CSS Reset */ 

/***** main styles ******/ 
body { 
    background-image:url(images/bg-top.jpg); 
    background-position:top center; 
    background-repeat:no-repeat; 
    background-color:#222121; 
} 

hr { 
    border : 0; 
    height : 2px; 
    background: url(images/line.png) 0 0 repeat-x; 
    margin : 1em 0;  
} 

p, h1, h2, h3, li { 
    font-family:Arial, Helvetica, sans-serif; 
    color:#b1b0b0; 
} 

h2 { 
    margin-bottom:40px; 
} 

h3 { 
    margin-top:30px; 
    margin-bottom:20px; 
    font-size:138.5%; 
    color:#fafafa; 
    text-transform:uppercase; 
} 

.body_text { 
    line-height:1.6em; 
    font-family: 'Arial Narrow', sans-serif; 
    font-size:114%; 
} 

input { 
    display:block; 
    border-top:2px solid #171717; 
    border-left:2px solid #171717; 
    border-right:2px solid #999; 
    border-bottom:2px solid #999; 
    background-color:#333; 
    width:200px; 
    margin-top:7px; 
    margin-bottom:10px; 
} 

textarea { 
    display:block; 
    border-top:2px solid #171717; 
    border-left:2px solid #171717; 
    border-right:2px solid #999; 
    border-bottom:2px solid #999; 
    background-color:#333; 
    width:300px; 
    height:120px; 
    margin-top:7px; 
    color:#CCC; 
} 

label { 
    color:#b1b0b0; 

} 

#submit { 
    width:100px; 
    border-top:2px solid #171717; 
    border-left:2px solid #171717; 
    border-right:2px solid #171717; 
    border-bottom:2px solid #171717; 
    color:#FFF; 
} 

/*** header styles ********/ 
#header_container { 
    margin:30px auto 0px auto; 
    width:860px; 
    height:110px; 
    background-image:url(images/line.png); 
    background-repeat:repeat-x; 
    background-position:0px 88px; 
} 

#menu { 
    position:relative; 
    left:527px; 
    top:-8px; 
} 

#menu li { 
    display:inline; 
    margin-right:20px; 
} 

#menu li.last { 
    display:inline; 
    margin-right:0px; 

} 

.menu_link1:link, .menu_link1:visited { 
    display:inline-block; 
    text-indent:-3000px; 
    width:45px; 
    height:16px; 
    background-image:url(images/home.png); 
} 

.menu_link1:active, .menu_link1:hover { 
    background-image:url(images/home_highlight.png); 
} 

.menu_link2:link, .menu_link2:visited { 
    display:inline-block; 
    text-indent:-3000px; 
    width:92px; 
    height:16px; 
    background-image:url(images/portfolio.png); 
} 

.menu_link2:hover, .menu_link2:active { 
    background-image:url(images/portfolio_highlight.png); 
} 

.menu_link3:link, .menu_link3:visited { 
    display:inline-block; 
    text-indent:-3000px; 
    width:45px; 
    height:16px; 
    background-image:url(images/blog.png); 
} 

.menu_link3:hover, .menu_link3:active { 
    background-image:url(images/blog_highlight.png);  
} 

.menu_link4:link, .menu_link4:visited { 
    display:inline-block; 
    text-indent:-3000px; 
    width:78px; 
    height:16px; 
    background-image:url(images/contact.png); 
} 

.menu_link4:active, .menu_link4:hover { 
    background-image:url(images/contact_highlight.png); 
} 

.active1 { 
    display:inline-block; 
    text-indent:-3000px; 
    width:45px; 
    height:16px; 
    background-image:url(images/home_highlight.png); 
} 

.active2 { 
    display:inline-block; 
    text-indent:-3000px; 
    width:92px; 
    height:16px; 
    background-image:url(images/portfolio_highlight.png); 
} 

.active3 { 
    display:inline-block; 
    text-indent:-3000px; 
    width:45px; 
    height:16px; 
    background-image:url(images/blog_highlight.png); 
} 

.active4 { 
    display:inline-block; 
    text-indent:-3000px; 
    width:78px; 
    height:16px; 
    background-image:url(images/contact_highlight.png); 
}` 

編輯加入font-size: 0px; line-height: 0px;到列表項

解決了這一問題。

但背景圖像不居中，這只是影響IE7

Answer 1

通過與IE8的兼容模式，它的開發者工具菜單看後，沒有與text-indent: -3000px;錯誤我不知道它是什麼，但刪除這使您的菜單按預期顯示。