我有一个可扩展的菜单。
在IE7上,我在顶部和底部有一个白色的间隙。在IE8上就在顶部。我尝试了不同的建议,但似乎没有任何帮助。
您可以在此处查看该网站:http://dffernandez.com/client_review_files/wap/
问题出在"基础设施"按钮上(第二个)
提前谢谢你。
.HTML
<!--Aside left nav-->
<div id="secondary-nav">
<ul>
<li class="leaf-first"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">airport & location details</a></li>
<li class="expand-top"></li> <!--Extra li so it can expand background-->
<li class="leaf-expand"><a href="#">infraestructure</a>
<!--Submenu-->
<ul class="asidel-submenu">
<li class="leaf-first"><a href="#">Current Tenants</a></li>
<li class="leaf"><a href="#">Industry Especific Info</a></li>
<li class="leaf"><a href="#">Aerospace</a></li>
<li class="leaf"><a href="#">Unmanned Aerial Vehicles</a></li>
<li class="leaf"><a href="#">Repair</a></li>
<li class="leaf-las"><a href="#">Summary of Master Plan</a></li>
</ul> <!--Submenu ends-->
</li> <!--Expand-->
<li class="expand-bottom"></li> <!--Extra li so it can expand background-->
<li class="leaf"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">communities</a></li>
<li class="leaf"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">newsroom</a></li>
<li class="leaf-last"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">location map</a></li>
</ul>
</div> <!--Aside left nav-->
.CSS
/*secondary nav*/
#aside-left #secondary-nav li{
list-style: url(none) none;
margin-bottom: 13px;
}
#aside-left #secondary-nav li a {
height: 31px;
display: block;
background: url(../img/left-aside/sec-nav-back.png);
text-transform: uppercase;
text-decoration: none;
padding-top: 12px;
padding-left: 12px;
}
#aside-left #secondary-nav ul .leaf-expand a {
background: url(../img/left-aside/sec-nav-expand-back.png) repeat-y;
height: auto;
padding-top: 6px;
padding-bottom: 6px;
}
#aside-left #secondary-nav ul .leaf-expand img { /*controls the arrow position next to the expand. For changing the image go to js/script.js*/
display: block;
float: left;
margin-right: 6px;
padding-left: 12px;
margin-top: 3px;
}
#aside-left #secondary-nav ul .expand-top {
background: url(../img/left-aside/sec-nav-expand-back-top.png) no-repeat;
height: 7px;
margin-bottom: 0px;
}
#aside-left #secondary-nav ul .expand-bottom {
background: url(../img/left-aside/sec-nav-expand-back-bottom.png) no-repeat;
height: 6px;
margin-top: -13px;
}
#aside-left #secondary-nav .asidel-submenu {
padding-left: 39px;
padding-right: 12px;
padding-bottom: 9px;
background: url(../img/left-aside/sec-nav-expand-back.png) repeat-y;
}
#aside-left #secondary-nav .asidel-submenu li {
list-style: disc inside;
margin-bottom: 3px;
color: #0073BC;
}
#aside-left #secondary-nav .asidel-submenu li a {
text-transform: none;
display: inline;
padding-left: 0px;
}
#aside-left #secondary-nav .sec-nav-arrow {
margin-right: 6px;
display: block;
float: left;
margin-top: -3px;
}
我以前遇到过这个问题,修复很简单,但有些奇怪。所有解释都在这里充分解释 - http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/
在IE7中,它的要点是这样的:
li a {display:inline-block;}
li a {display:block;}
没错,在你说显示:块之前,你必须说显示:内联块。很奇怪吧?但它有效!
您也可以在所有浏览器中执行此操作。
编辑:我的错,我突然得出了关于你的帖子的结论 - 这对你来说是一个更好的答案:
你这样做的方式是一种非常疯狂的方式来尝试和完成它。您尝试保留的"图形"可以通过简单的边框在CSS中复制。看看这个小提琴:
http://jsfiddle.net/CC4gv/
现在你可以完全摆脱多余的li。
The important rules of styling list-based menus:
- 重置您的列表 ul、li
{padding:0;margin:0}
- 不要为列表元素(
ul
、li
)设置除position
、float
或display
以外的任何样式 - 使用
display:block
并将所有样式放在 A 标签上
这解决了 99% 的列表布局问题。
此外,UI 元素应该是 CSS 背景图像,而不是内联标记。这将帮助您保持对布局的更多控制。
这一切都在我的教程中解释:我喜欢列表。