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>之间的换行符将转换为单个空格。您可以注释掉空格，也可以将所有兄弟姐妹放在同一行：

注释出：

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

您也可以在float: left元素上使用li，这会将它们从内联文档流中取出。可能是一个负左边距，可以将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，可以在列表项之间添加注释：

<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

修复：添加缩放：1和*显示：内嵌到CSS中的元素

原创CSS ：

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

修正了CSS ：

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

显示前面的星号（*）：内联允许其他浏览器忽略该行。

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

Answer 5

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

NM。在ie6中，它们显示为水平条。为迈克兹的回答+1。应该这样做。

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

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

7 个答案: