2011-10-02 136 views
1

我覺得這是一個很重要的問題:IE6,IE7 CSS菜單UL

所有的瀏覽器和IE 8+顯示我的UL菜單:enter image description here

但IE6和IE7顯示:

enter image description here

這個問題的任何解決辦法? CSS:

div.art-nav 
{ 
    position: relative; 
    height: 25px; 
    z-index: 100; 
} 

.art-nav .l, .art-nav .r 
{ 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    height: 25px; 
    background-image: url('images/nav.png'); 
} 

.art-nav .l 
{ 
    left: 0; 
    right: 15px; 
} 

.art-nav .r 
{ 
    right: 0; 
    width: 1040px; 
    clip: rect(auto, auto, auto, 875px); 
} 

/* begin MenuSeparator */ 


ul.art-menu ul.art-menu-li-separator 
{ 
    display: block; 
    width: 1px; 
    height: 25px; 
} 

.art-nav ul.art-menu-separator 
{ 
    display: block; 
    margin:0 auto; 
    width: 1px; 
    height: 25px; 
    background-image: url('images/menuseparator.png'); 
} 
/* end MenuSeparator */ 
ul.art-menu ul a 
{ 
    display: block; 
    text-align: center; 
    white-space: nowrap; 
    height: 32px; 
    width: 180px; 
    overflow: hidden; 
    line-height: 32px; 
    background-image: url('images/subitem.png'); 
    background-position: left top; 
    background-repeat: repeat-x; 
    border-width: 0; 
    border-style: solid; 
} 

ul.art-menu ul a, ul.art-menu ul a:link, ul.art-menu ul a:visited, ul.art-menu ul a:hover,ul.art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span 
{ 
    text-align: left; 
    text-indent: 12px; 
    text-decoration: none; 
    line-height: 32px; 
    color: #FFFFFF; 
    margin-right: 10px; 
    margin-left: 10px; 
    font-size: 13px; 
    margin:0; 
    padding:0; 
} 

ul.art-menu ul li a:hover 
{ 
    color: #000000; 
    background-position: 0 -32px; 
} 

ul.art-menu ul li:hover>a 
{ 
    color: #000000; 
    background-position: 0 -32px; 
} 

.art-nav ul.art-menu ul li a:hover span, .art-nav ul.art-menu ul li a:hover span span 
{ 
    color: #000000; 
} 

.art-nav ul.art-menu ul li:hover>a span, .art-nav ul.art-menu ul li:hover>a span span 
{ 
    color: #000000; 
} 
************************/ 

HTML:

<div class="art-nav"> 
       &nbsp;&nbsp;&nbsp; 
     <a href="javascript:__doPostBack('ctl00$lbLang','')" id="ctl00_lbLang"><span class="l"></span><span class="r"></span><span class="t"><img border="0" src="slm/me.jpg"></span></a> 
     <a href="javascript:__doPostBack('ctl00$lbLangJez2','')" id="ctl00_lbLangJez2"><span class="l"></span><span class="r"></span><span class="t"><img border="0" src="slm/UNKG1.jpg"></span></a> 
        <div class="l"></div> 
        <div class="r"></div> 
        <ul class="art-menu"> 
         <li> 

     <a href="News.aspx" class="active" id="ctl00_hlNovosti"><span class="l"></span><span class="r"></span><span class="t">Novosti</span></a> 
         </li><li class="art-menu-li-separator"><span class="art-menu-separator"></span></li><li> 
     <a href="roules.aspx" class="active" id="ctl00_hlPravilaKladjenja"><span class="l"></span><span class="r"></span><span class="t">Pravila kladjenja</span></a> 
         </li><li class="art-menu-li-separator"><span class="art-menu-separator"></span></li><li> 
     <a href="onama.aspx" class="active" id="ctl00_hlOnama"><span class="l"></span><span class="r"></span><span class="t">O nama</span></a> 
         </li><li class="art-menu-li-separator"><span class="art-menu-separator"></span></li><li> 
     <a href="UplatnaMesta.aspx" class="active" id="ctl00_hlUplatnaMesta"><span class="l"></span><span class="r"></span><span class="t">Uplatna mesta</span></a> 
         </li> 
        </ul> 
       </div> 
+3

是的,有一個解決方案! ...但是,我們可以看到你的HTML和CSS的任何機會,但?只是爲了幫助我們幫你一點..? –

+2

當只有9%的_entire world_仍然使用它時,爲什麼還要繼續支持IE6?你有助於保持這個怪物的活力! http://www.ie6countdown.com/ – Kyle

+0

你使用邊緣或填充項目菜單? – Mhmd

回答

1

可能有一些與此有關

clip: rect(auto, auto, auto, 875px);

.art-nav .r

IE不clip

http://reference.sitepoint.com/css/clip

做好看看是否移除修復它?如果是的話,你可以使用條件的意見發送經修改的CSS IE瀏覽器。

+0

「IE瀏覽器不適合剪輯」 - 感謝您的信息 – ShibinRagh