2011-10-02 106 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