0

经过很长时间的尝试我仍然没有接近，我不知道如何为这个网站制作菜单（找到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

4

1 回答 1

1

使用 IE8 的兼容模式及其开发人员工具查看菜单后，出现错误，text-indent: -3000px;我不知道它是什么，但删除它会使您的菜单按预期显示。

于 2011-03-22T12:19:11.627 回答