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

创建菜单之前的第一件事，不要使用margin而是使用li span（带有宽度和高度的块后面的a及其大小）导航的固定宽度不是菜单容器的100％使用z索引作为容器元素，以便IE6可以正确读取它

Answer 2

也许？

http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 3

<!-- Place this in the document's head, after your regular stylesheets -->
<!--[if lte ie7]>

<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css">

<![endif]-->

在：

#problematic ul li
{margin-top: 5px; /* half, or less, of the value used in the regular stylesheet */
margin-right: 5px; /* half, or less, of the value used in the regular stylesheet */
}

/* any other rules required to correct the aberrance that is Internet Explorer */

我会使用正确的值（或者我会认为正确的值），但我不知道哪个菜单或菜单li是问题，因为<a></a>标记之间没有文字来反映链接图片中的文字。

虽然在发布一些代码时感到很荣幸，但有些人仍然没有那么做。

让我知道这是否有用，或者如果有什么不做，我会尝试提供更多帮助。虽然如果是这样，我会要求您链接到一个包含jsbin代码的实时网站（如您的问题的评论中所述）或您自己的网站。

干杯=）

IE6中的菜单不正确

CSS

XHTML

3 个答案: