html - IE6,IE7 css 菜单 ul

Question

我认为这是一个微不足道的问题:

所有浏览器和 IE 8+ 显示我的 ul 菜单:

但 IE6 和 IE7 显示:

这个问题有什么解决办法吗？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>

Answer 1

可能与此有关

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

在

.art-nav.r

IE 不能很好地处理 clip

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

看看删除它是否修复了它...如果是这样，您可以使用条件注释将修改后的 css 发送到 IE。