1

私は古いブラウザをサポートする必要があることに慣れていないので、これは途方に暮れています-

何らかの理由で、メニューが 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;
}
4

1 に答える 1

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;
}
于 2012-11-25T23:03:02.210 に答える