简单的导航栏在IE6中不起作用?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

我已经在我的网站上创建了一个水平导航栏,但它在IE6中无法正确显示。

这是一个非常简单的导航栏,我不知道100%在IE6中有什么用。

我的CSS有什么问题?

谢谢

HTML:

<div id="controlslider">
    <ul>
        <li><a href="#slider2">Work, Life: Balanced.</a></li>
        <li><a href="#slider3">Mobilise your workforce.</a></li>
        <li><a href="#slider4">Built for business.</a></li>
        <li><a href="#slider5">Work whenever, wherever.</a></li>
        <li><a href="#slider6">Where to buy.</a></li>
    </ul>
</div>

CSS:

#controlslider{
    width: 981px;
    height: 50px;
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu.gif) no-repeat;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    margin-top: -25px;
    list-style: none;
    overflow: hidden;
}
#controlslider ul{
    list-style: none;
    display: block;
    margin-left: -36px;
    margin-top: 0;
    list-style-type: none;
}
#controlslider li{
display: inline-block !important;
padding: 5px 0px 0 0;
width: 190px;
height: 35px;
position: relative;
overflow: hidden;
}
#controlslider li a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color : white;
    text-decoration: none;
    display: block !important;
    width: 190px;
    height: 35px;
    text-align: center;
    padding-top: 10px;
}
#controlslider li a:hover{
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu_button.png);
    width: 190px;
    height: 35px;
}
提问于
用户回答回答于

尝试blockfloat不是inline-block

#controlslider li{
   display: block !important;
   float: left;
   padding: 5px 0px 0 0;
   width: 190px;
   height: 35px;
   position: relative;
   overflow: hidden;
}

一定要清除后浮动UL

用户回答回答于

我对你的两个负边缘感到困惑。

至少第一个似乎有一些逻辑,因为你似乎正在使用它来移动菜单,但你永远不应该修复负边距的问题。

第二个负余量对我来说没有任何意义,因为它搞砸了菜单。

事情没有正确显示,至少是因为你有两个负利润。(不要在问题中说出问题,但肯定是个问题。)

你应该摆脱这些。

#controlslider{
        margin-top: -25px;
}
#controlslider ul{
        margin-left: -36px;
}

编辑:我想请注意,我全都使用负边距。问题在于,如果可以通过优化代码来修复代码,那么使用负边距修复代码效率不高。这甚至可能导致一些问题。

扫码关注云+社区

领取腾讯云代金券