2011-07-20 12 views
0

私が取り組んでいるウェブサイトには、最後のリンクの背景としてロゴ画像を含むメニューがあります。何らかの理由で、たとえそれが他のすべてのブラウザで正常に表示されても、IEに画像が表示されません。CSS:メニューリンクの背景画像がIE 8で表示されない

ここでは、サイトの:

http://www.cybart.com/bscg/

誰かが私のCSSを見て、Internet Explorerのバージョンを提案することができれば、私はそれを感謝:

#access { 
    left:70%; 
    top:140px; 
    margin-left:-600px; 
     width: 280px; 
    z-index:999; 
    position:relative; 
    float:left;" 
    } 

#access ul { 
-moz-box-shadow: 0 0 5px -1px #888; 
-webkit-box-shadow: 0 0 5px -1px #888; 
box-shadow: 0 0 5px -1px #888; 
} 

#access ul, 
#access ul ul { 
list-style-type:none; 
width: 250px; 
} 

#access ul ul { 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
box-shadow: none; 
display:none; 
} 


#access ul li:hover > ul { 
    display: block; 
} 


#access ul li:last-child { 
height:77px; 
background: url(images/aba/ABALinkRed.jpg) no-repeat top left; 
text-indent: -3000px; 
-moz-box-shadow: 0 0 5px -1px #888; 
-webkit-box-shadow: 0 0 5px -1px #888; 
box-shadow: 0 0 5px -1px #888; 
} 

#access ul li:last-child a { 
background:transparent; 
height:77px; 
} 

#access ul ul li:last-child { 
background:transparent; 
height:32px; 
text-indent: 0px; 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
box-shadow: none; 
} 

#access ul ul li:last-child a { 
background:#fff; 
background: rgba(255, 255, 255, 0.85); 
height:18px; 
} 


#access ul a, 
#access ul ul a { 
display:block; 
padding: 7px 0 7px 10px; 
background:#fff; 
background: rgba(255, 255, 255, 0.85); 
text-decoration:none; 
color:black; 

} 


#access ul ul { 
padding-left:40px; 
margin-left:-20px; 
} 

#access ul ul a { 
margin-left: -20px; 
padding-left:20px; 
width:230px; 
} 


#access ul a:hover, 
#access ul ul a:hover { 
color: #CA0000; 
} 

#access ul li.current_page_item > a, 
#access ul li.current-menu-ancestor > a, 
#access ul li.current-menu-item > a, 
#access ul li.current-menu-parent > a { 
color: #CA0000; 
} 

答えて

2

それはIE9で動作しますので、私はあなたがIE8を使用していると仮定します。

これは、あなたが画像を追加している方法です:

#access ul li:last-child { 
    background: url(images/aba/ABALinkRed.jpg) no-repeat top left; 
} 

それが動作しない理由は:last-childはバージョン9までIEでサポートされていないことで、以下を参照してくださいhttp://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#pseudoclasses

+0

はありがとう、ThirtyDot 。 .aba_logoクラスを問題のリンクに割り当てるとしましょう。あなたはそれを動作させる方法を教えてください。 –

+0

'#access ul ul:last-child'宣言の代わりに' .aba_logo'宣言を使用します。 –

+0

それはまさに私の問題です。背景画像は、私がそれを行うときには見えない方法で表示されます。更新されたサイトをご覧ください。 –

関連する問題