IE6和IE7中的导航栏

时间:2013-10-17 21:08:20

标签: internet-explorer css-float

我的导航栏(右侧)在IE6和IE7中无法正常工作......

这是正确的导航栏样式(现代浏览器): no issue

Internet Explorer 6(右侧图像彼此不同): images on right side are under each other

Internet Explorer 7(右侧缺少两个图像): two images are missing

以下是导航栏的源代码......

CSS:

/*----- NAV -----*/
#nav            { min-width: 920px; padding: 0 30px; background-color: #e9e9e9; }
#nav2           { width: 920px; height: 75px; margin-left: auto; margin-right: auto; } 

/*----- LEFT -----*/
ul#topnav           { margin: 0; padding: 0; list-style: none; float: left; width: 650px; }
ul#topnav li            { float: left; margin: 0; padding: 0; }
ul#topnav a         { float: left; display: inline; height: 75px; background-position: left top; }
ul#topnav a:hover       { background-position: left -75px; }
ul#topnav a span        { display: none; }

/*----- RIGHT -----*/
ul#topnav2          { margin: 0; padding: 0; list-style: none; float: right; width: 270px; }
ul#topnav2 li           { float: right; margin: 0; padding: 0; }
ul#topnav2 a            { float: right; display: inline; height: 75px; background-position: left top; }
ul#topnav2 a:hover      { background-position: left -75px; }
ul#topnav2 a span       { display: none; }

/*----- IMAGES -----*/
ul#topnav li.ads a      { background-image: url(../images/ads.png); width: 60px; }
ul#topnav li.reg a      { background-image: url(../images/reg.png); width: 60px; }
ul#topnav li.login a        { background-image: url(../images/account.png); width: 60px; }
ul#topnav2 li.help a        { background-image: url(../images/help.png); width: 50px; }
ul#topnav2 li.terms a       { background-image: url(../images/terms.png); width: 50px; }
ul#topnav2 li.contact a     { background-image: url(../images/contact.png); width: 50px; }

HTML:

<div id="nav"><div id="nav2"> 

<ul id='topnav'>
    <li class='ads' title='Ads'><a href='ads.php'><span>Ads</span></a></li>
        <li><img src='images/spacer.png' alt='' /></li>
    <li class='reg' title='Register'><a href='register.php'><span>Register</span></a></li>
    <li class='login' title='Login'><a href='login.php'><span>Login</span></a></li>
</ul>
<ul id='topnav2'>
    <li class='contact' title='Contact'><a href='contact.php'><span>Contact</span></a></li> 
        <li><img src='images/spacer.png' alt='' /></li> 
    <li class='help' title='Help'><a href='help.php'><span>Help</span></a></li>
    <li class='terms' title='Terms'><a href='terms.php'><span>Terms</span></a></li>
</ul>

</div></div>

我该如何解决这个问题?

0 个答案:

没有答案