IE7 中的 CSS <ul> <li> 差距

Question

我有一个 CSS <ul> <li> 嵌套菜单，它在 IE 8 和 firefox 中完美运行，但在 IE7 中它会在元素之间产生一个小间隙。 这是我的 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>

Answer 1

我实际上是通过将vertical-align: bottom 设置为 LI 元素来修复它（是的，我没有删除空格和换行符:)

Answer 2

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

注释掉：

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

或：

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

（在后一个示例中，请注意紧邻下一个兄弟之前的下一行的 <li> 标签的结束 >）

或者你可以使用同行兄弟：

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

您也可以只在li 元素上使用float: left，这会将它们从内联文档流中移除。可能是负的左边距将li 向左移动以“覆盖”前面的空白，但可能需要反复试验才能找到合适的测量值来覆盖空间而不覆盖前面的li 元素。

Answer 3

这可能是由于列表项之间的空格。您可以通过删除列表项之间的空格来解决问题，如下所示：

<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>

或者这个：

<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>

或者如果你想要更好看的 HTML，你可以在列表项之间放置 cmets：

<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>

还有使用 CSS 删除空格的技巧，如 here 所述。

Answer 4

修复：在 CSS 中的元素中添加 zoom:1 和 *display: inline

原始 CSS：

.blueberry .pager li {
display: inline-block;
}

固定 CSS：

.blueberry .pager li {
display: inline-block;
zoom: 1;
*display: inline;
}

display:inline 前面的星号 (*) 允许其他浏览器忽略该行。

来自：http://uncorkedstudios.com/2011/12/12/how-to-fix-the-ie7-and-inline-block-css-bug/

Answer 5

我假设您正在尝试制作水平导航？尝试将 display:inline 添加到您的容器中。 编辑：

纳米。在 ie6 中，它们显示为水平条。 +1 为 mikez 的回答。应该这样做。

Answer 6

在您当前的模型中，它是 li 标签之间的额外空间。真是愚蠢的IE东西。但是，以下 css 可以修复它并防止您的 li 标签全部位于 1 行。 （在 IE7、Opera、Chrome 中测试）

<style type="text/css">
    #nav { margin:0; padding:0; list-style-type: none; width:12em; }
    #nav li { position:relative; background:url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left; display:inline; }
    #nav a, 
    #nav a:active, 
    #nav a:visited { display:block; padding:5px; border:1px solid #258be8; color:#fff; text-decoration:none; background-color:#258be8; width:100%; }
    #nav a:hover { background-color: #fff; color: #333; }
</style>

也许你有很多额外的下拉代码？任何我没有添加的人。

Answer 7

您可以将此样式添加到您的styles.ie.css

/* for IE7 only */
*+html #nav { font-size: 0; line-height: 0;}
*+html #nav li {font-size: 12px; line-height: 18px; }