css - IE6 中的菜单不正确

Question

我在使用 IE6 时遇到了一些问题

有 2 个无序列表在 IE6 中看起来不太好。

这是 Firefox 3.5 的快照:http://img524.imageshack.us/img524/2772/ff35.gif

IE6:http://img403.imageshack.us/img403/7321/40553149.gif

代码:

CSS

#nav-black {
    height: 37px;
    background:#000;
}      

#nav-black ul.left {
    float:left;
}

#nav-black ul.right {
    float:right;
    margin-top:5px;
    margin-right:10px;
}

.about a{
    float:right;
    background: url(library/media/images/about.gif) no-repeat ;
    height:29px;
    width:87px;
}

.about a:hover {
    background: url(library/media/images/about_hover.gif) no-repeat ;
}

.right li {
    float:right;
    display:block;
}

.term  a {
    float:right;
    background: url(library/media/images/term.gif) no-repeat ;
    height:29px;
    width:107px;
}

.term a:hover {
    background: url(library/media/images/term_hover.gif) no-repeat ;
}

.left li {
    float:left;
    display:block;
    margin-right:12px;
}

.contact a {
    float:left;
    background: url(library/media/images/contact.gif) no-repeat ;
    height:32px;
    width:39px;
}

.contact a:hover {
    background: url(library/media/images/contact_hover.gif) no-repeat ;
}

.twitter a {
    float:left;
    background: url(library/media/images/twitter.gif) no-repeat ;
    height:32px;
    width:34px;
}

.twitter a:hover {
    background: url(library/media/images/twitter_hover.gif) no-repeat ;
}

.rssicon a {
    float:left;
    background: url(library/media/images/rssicon.gif) no-repeat ;
    height:32px;
    width:32px;
}

.rssicon a:hover {
    background: url(library/media/images/rssicon_hover.gif) no-repeat ;
}

#navbig {
    height:57px;
    width:100%;
    margin:-21px 21px;
}

#navbig li a {
    float:right;
    display:inline;
    margin:0 0 0 40px;
}

.webdev a {
    background: url(library/media/images/webdev.gif) no-repeat ;
    height:56px;
    width:190px;
}

.webdev a:hover {
    background: url(library/media/images/webdev_hover.gif) no-repeat ;
}

.design a {
    background: url(library/media/images/design.gif) no-repeat ;
    height:56px;
    width:190px;
}

.design a:hover {
    background: url(library/media/images/design_hover.gif) no-repeat ;
}

.interview a {
    background: url(library/media/images/interview.gif) no-repeat ;
    height:56px;
    width:190px;
}

.interview a:hover {
    background: url(library/media/images/interview_hover.gif) no-repeat ;
}

.downloads a {
    background: url(library/media/images/downloads.gif) no-repeat ;
    height:56px;
    width:190px;
}

.downloads a:hover {
    background: url(library/media/images/downloads_hover.gif) no-repeat ;
}

XHTML

 <!--BEGIN .container-->
 <div class="container">

  <!--BEGIN .header-->
  <div class="header">
  <div id="nav-black">

 <ul class="left">
  <li class="contact">< a href="#"></li>
  <li class="twitter">< a href="#"></li>
  <li class="rssicon">< a href="#"></li>

 </ul>


 <ul class="right">
  <li class="about">< a href="#"></a></li>
  <li class="term" >< a href="#"></a></li>
 </ul>

  </div>
  <div id="header-bg">< a href="<?php bloginfo('url'); ?>"><div id="logo_i" ></div></a></div>
  <div id="navbig">

 <ul class="right">
  <li class="webdev">< a href="#"></a></li>
  <li class="design" >< a href="#"></a></li>
  <li class="interview" >< a href="#"></a></li>
  <li class="downloads" >< a href="#"></a></li>
 </ul>
  </div>
  <!--END .header-->
  </div>



  <!--BEGIN #content-->
  <div id="content">

等待您的回答。

Answer 1

在创建菜单之前的第一件事，不要使用边距，而是使用 li span(具有宽度和高度的 block ，然后是具有其尺寸的 a) 对导航使用固定宽度，而不是对菜单容器使用 100%对容器元素使用 z 索引以便 IE6 可以正确读取它