简单的导航栏在IE6中不起作用？
简单的导航栏在IE6中不起作用？
提问于 2011-07-11 19:17:29
我在我的网站上做了一个水平导航栏，但它在IE6中不能正确显示。
这是一个非常简单的导航栏，我不知道在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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2011-07-11 19:30:58
尝试使用block和float，而不是inline-block。
#controlslider li{
display: block !important;
float: left;
padding: 5px 0px 0 0;
width: 190px;
height: 35px;
position: relative;
overflow: hidden;
}请确保在UL之后清除浮点。
Stack Overflow用户
发布于 2011-07-11 19:34:05
我对你们两个负的利润率感到困惑。
至少第一个看起来有一定的逻辑，因为你似乎是在用它来向上移动菜单，但你永远不应该修复边距为负的问题。
第二个负边距对我来说没有任何意义，因为它搞乱了菜单。
事情没有正确显示，至少是因为你有这两个负的边距。(并不是说这一定是你问题中的问题，但它确实是一个问题。)
你应该扔掉这些东西。
#controlslider{
margin-top: -25px;
}
#controlslider ul{
margin-left: -36px;
}编辑:我想指出的是，我完全赞成使用负边距。问题是，如果代码可以通过改进代码来修复，那么用负边距来修复它并不是很有效率。这甚至可能导致一些问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6649293
复制相关文章
相似问题