html - 菜单栏无法在IE 7/6中正确呈现

我不习惯需要支持较旧的浏览器，因此这让我无所适从-

由于某种原因，我的菜单在IE7 / 6中呈现为这种形式。



...但是在所有其他浏览器中看起来都是这样



有任何想法吗？

这是我的代码

的HTML

<nav class="main-nav-bar">
  <div class="wrapper cf">
    <img class="title" src="./images/title.png" alt="">
    <ul class="main-nav cf">
      <li><a href="#" title="home page" class="home"><img src="./images/home.png" alt="home button"/></a></li>
      <li class="about"><a href="#" title="learn about us" class="about"><img src="./images/about.png" alt="about button"/></a></li>
      <li><a href="#" title="latest news" class="news"><img src="./images/news.png" alt="news button"/></a></li>
      <li><a href="#" title="contact us" class="contact"><img src="./images/contact.png" alt="contact button"/></a></li>
    </ul><!--End .main-nav-->
  </div><!--End .wrapper-->
</nav><!--End .main-nav-bar-->

的CSS

.main-nav-bar{
  background-color: #00653a;
  line-height: 0;
}

.main-nav{
  float: right;
  max-width: 50%;
}

.main-nav li {
  float: left;
  border-right: #00824c 1px solid;
}

.main-nav li:nth-of-type(1){
  border-left: #00824c 1px solid;
}

.main-nav a{
  display: block;
  text-decoration: none;
}

最佳答案

尝试这个：
html

<nav class="main-nav-bar">
  <div class="wrapper cf">
    <ul class="main-nav cf">
      <li><a href="#" title="home page" class="home"><img src="./images/home.png" alt="home button"/></a></li>
      <li class="about"><a href="#" title="learn about us" class="about"><img src="./images/about.png" alt="about button"/></a></li>
      <li><a href="#" title="latest news" class="news"><img src="./images/news.png" alt="news button"/></a></li>
      <li><a href="#" title="contact us" class="contact"><img src="./images/contact.png" alt="contact button"/></a></li>
    </ul><!--End .main-nav-->
    <img class="title" src="./images/title.png" alt="">
  <div style="clear:both;"></div>
  </div><!--End .wrapper-->
</nav><!--End .main-nav-bar-->
</nav><!--End .main-nav-bar-->

style.css

.main-nav-bar{
  background-color: #00653a;
  line-height: 0;
}
.wrapper img{float:left;}
.main-nav{
  float: right;
  max-width: 50%;
}

.main-nav li {
  float: left;
  border-right: #00824c 1px solid;
}

.main-nav li:nth-of-type(1){
  border-left: #00824c 1px solid;
}

.main-nav a{
  display: block;
  text-decoration: none;
}

关于html - 菜单栏无法在IE 7/6中正确呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13556455/