0

私はまだ近づいていないことを長い間試した後、IE7に表示されるこのWebサイト（ここにあります）のメニューを作成する方法がわかりません。

この結果を達成するために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;I have no idea what it is というエラーが表示されますが、これを削除するとメニューが意図したとおりに表示されます。

于 2011-03-22T12:19:11.627 に答える