垂直菜单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.

您可以在这里看到该网站：

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;

}

推荐答案

我'我之前遇到过这个问题，修复很简单，但有些奇怪。这里完全解释了 -

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:

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

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

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