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

Question

我不习惯需要支持旧版浏览器，所以这个让我不知所措-

出于某种原因，我的菜单在 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;
}

Answer 1

试试这个： 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-->

样式.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;
}