当前位置: 代码迷 >> HTML/CSS >> IE6的菜单变形,该怎么解决
  详细解决方案

IE6的菜单变形,该怎么解决

热度:85   发布时间:2013-01-05 15:20:40.0
IE6的菜单变形
IE6下的效果

IE7,IE8,IE9,火狐下都没有问题


HTML代码

<div>
<ul id="menu">
<li id="menu_active"><a href="index.html"><span><span>Home</span></span></a></li>
<li><a href="Features.html"><span><span>Features</span></span></a></li>
<li class="nav3"><a href="Support.html"><span><span>Support</span></span></a></li>
<li class="nav4"><a href="Downloads.html"><span><span>Downloads</span></span></a></li>
<li class="nav5"><a href="Contacts.html"><span><span>Contacts</span></span></a></li>
</ul>
</div>


CSS代码

#menu {float:right;padding:52px 0 0 0;}
#menu li {float:left;padding-left:1px;}
#menu li a {display:block;font-size:15px;color:#000;text-decoration:none;line-height:60px;background:url(../images/menu_bg.gif) top repeat-x;height:56px;overflow:hidden;cursor:pointer}
#menu li a span {display:block;background:url(../images/menu_bg_left.gif) top left no-repeat}
#menu li a span span {background:url(../images/menu_bg_right.gif) top right no-repeat;padding:0 32px;height:56px}
#menu li a:hover, #menu #menu_active a {color:#fff;background:url(../images/menu_bg_active.gif) top repeat-x}
#menu li a:hover span, #menu #menu_active a span {background:url(../images/menu_bg_left_active.gif) top left no-repeat}
#menu li a:hover span span, #menu #menu_active a span span {background:url(../images/menu_bg_right_active.gif) top right no-repeat}
#menu .nav3 a:hover, #menu .nav3#menu_active a {background:url(../images/menu_nav3_bg.gif) top repeat-x}
#menu .nav3 a:hover span, #menu .nav3#menu_active a span {background:url(../images/menu_nav3_left.gif) top left no-repeat}
#menu .nav3 a:hover span span, #menu .nav3#menu_active a span span {background:url(../images/menu_nav3_right.gif) top right no-repeat}
#menu .nav4 a:hover, #menu .nav4#menu_active a {background:url(../images/menu_nav4_bg.gif) top repeat-x}
#menu .nav4 a:hover span, #menu .nav4#menu_active a span {background:url(../images/menu_nav4_left.gif) top left no-repeat}
#menu .nav4 a:hover span span, #menu .nav4#menu_active a span span {background:url(../images/menu_nav4_right.gif) top right no-repeat}
#menu .nav5 a:hover, #menu .nav5#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
#menu .nav5 a:hover span, #menu .nav5#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
#menu .nav5 a:hover span span, #menu .nav5#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}

------解决方案--------------------
神哪,你写的这是什么呀。。。。
用得着这么多样式吗。。。。。
方法1,你得给li或a指定个宽度呀,你用了太多的样式了, 这个貌似不适合你。
方法2,把A和spanblock都改成inline-block就行了
  相关解决方案