CSS< ul> < li>间隙在IE7 [英] CSS <ul> <li> gap in IE7

问题描述

我有一个CSS < ul> < li> 嵌套菜单， firefox但在IE7它产生元素之间的一个小间隙。
这是我的CSS：

I have a CSS <ul> <li> nested menu that works perfectly in IE 8 and firefox but in IE7 it produces a small gap between the elements. this is my CSS:

#nav, #nav ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position:static;/*the key for ie7*/
    line-height: 1.5em;

}

#nav li
{
    float: inherit;
    position: relative;
    width: 12em;
}
#nav ul
{

    position: absolute;
    width: 12em;
    top: 1.5em;
    display: none;
    left: auto;

}
#nav a:link, #nav a:active, #nav a:visited
{

    display: block;
    padding: 0px 5px;
    border: 1px solid #258be8; /*#333;*/
    color: #fff;
    text-decoration: none;
    background-color: #258be8; /*#333;*/
}

#nav a:hover
{
    background-color: #fff;
    color: #333;

}
#nav ul li a
{
    display: block;
    top: -1.5em;
    position: relative;
    width: 100%;
    overflow: auto; /*force hasLayout in IE7 */
    right: 12em;
    padding:0.5em; 
}

#nav ul ul
{
    position: absolute;
}

#nav ul li ul
{
    right: 13em;
    margin: 0px 0 0 10px; 
    top: 0;
    position: absolute;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
    display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
    display: block;
}

#nav li
{
background: url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left;
}

#divHead, #featuresDivHead
{
    padding: 5px 10px;
    width: 12em;
    cursor: pointer;
    position: relative;
    background-color: #99ccFF;
    margin: 1px;
}
/* Holly Hack for IE \*/
* html #nav li { float: left; height: 1%; }
* html #nav li a { height: 1%; }
/* End */

这里是一个菜单示例：

<ul id='nav'><li><a href="#">Bookstore Online</a></li>
    <li><a href="#">Study Resources</a></li>
    <li><a href="#">Service Information</a></li>
    <li><a href="#">TV Broadcast</a></li>
    <li><a href="#">Donations</a></li></ul>

推荐答案

如果显示< li> 元素inline（要创建水平菜单），同级< li> 之间的换行符将被转换为单个白色空间。您可以注释掉空格，或将所有兄弟姐妹放在同一行：

If you're displaying the <li> elements inline (to create a horizontal menu) the line-breaks between the sibling <li>s are being converted into a single white-space. You can either comment-out the spaces, or put all the siblings on the same line:

注释：

...<li>element One</li><!--
--><li>element Two</li><!--
--><li>element Three</li>...

或：

...<li>element One</li
   ><li>element Two</li
   ><li>element Three</li>...

$ b b

（在后面的示例中，注意下一个标签中< li> 标签的>

，或者您可以使用同行兄弟：

or you can use same-line siblings:

...<li>element One</li><li>element Two</li><li>element Three</li>...

您也可以在 li上使用 float：left 元素，它们从内联文档流中移除。可能是一个负左边距将 li 向左移动到覆盖前面的空格，虽然它可能会尝试和错误找到合适的测量来覆盖空间，覆盖前面的 li 元素。

You could also just use float: left on the li elements, which takes them out of the inline document flow. Possibly a negative left-margin to move the li left to 'cover' the preceding whitespace, though it would likely take trial and error to find a suitable measurement to cover the space without covering the preceding li element.

这篇关于CSS< ul> < li>间隙在IE7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！