垂直菜单IE7上的白色空间 [英] White space on vertical menu IE7

问题描述

我有一个可扩展的菜单。

I have an expandable menu.

在IE7上，我在顶部和底部有一个白色的间隙。在IE8上面就是顶部。我尝试了不同的建议，但似乎没有任何帮助。

On IE7 I'm getting a white gap at the top and the bottom. On IE8 just at the top. I've tried different suggestions but nothing seems to help.

您可以在这里看到该网站：
http://dffernandez.com/client_review_files/wap/

You can see the site in here: http://dffernandez.com/client_review_files/wap/

问题在于 infraestructure按钮（第二个）

The problem is on the "infraestructure" button (The 2nd one)

提前感谢您。

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 &amp; 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/

I've come across this problem before, the fix is simple, yet somewhat odd. All explained fully here - http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

在IE7中，它的要点是：

The gist of it, in IE7, is this:

li a {display:inline-block;}
li a {display:block;}

这是正确的，你必须说display：inline-block在你说display：block之前。很奇怪，是吗？但是它有效！

That's right, you have to say display: inline-block BEFORE you say display: block. Weird, huh? But it works!

你也可以在所有浏览器中都这样做。

And you can do it in all browsers too.

编辑：
我的不好，我跳到了关于你的帖子的结论 - 这里有一个更好的答案：

My bad, I jumped to a conclusion about your post - here's a better answer for you:

你这样做的方式是试图完成它的真正疯狂的方式。您尝试保留的图形可以通过简单的边框在CSS中复制。看看这个小提琴：

The way you're doing it is a really crazy way to try and accomplish it. The "graphic" you're trying to preserve can be replicated in CSS by a simple border. Take a look at this fiddle:

http：// jsfiddle。 net / CC4gv /

现在你可以完全摆脱额外的利息。

Now you can get rid of the extra li's altogether.

这篇关于垂直菜单IE7上的白色空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！