ul中的IE7奇怪间距

Question

所以，我正在制作这个上下文菜单，它在所有主流浏览器中看起来都很棒，甚至IE也很好用，直到IE7。

​

​

我不知道为什么它有这么奇怪的间距，并希望有人能给我启发。

Here's a JSFiddle

CSS

/* CSS Document */

*{
    zoom: 1;
}    

.context-menu-container{
    border: 1px solid #828790;
    padding: 2px;
    width: 100px;
    background-color: #f1f1f1;
    font-family: 'MS Sans Serif', Geneva, sans-serif;
    font-size: 12px;
    position: relative;
    margin-left: 5px;
    margin-top: 5px;
}

.context-menu{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: block;
    position: relative;
}

.context-menu li{
    position: relative;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 2px;
    margin: 0px;
}

.context-menu li.separator{
    height: 2px;
    border: 0;
    background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
    padding: 2px;
    margin-left: 26px;
}

.context-menu li.separator:hover{
    border: 0;
    background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
}

.context-menu li:hover{
    border: 1px solid #afd0f7;
    background: url(http://img860.imageshack.us/img860/3511/contextmenuhover.png) repeat-x;
}

.context-menu li.disabled, .context-menu li.disabled a{
    color: #8b8b8b;
}

.context-menu li.disabled:hover{
    border: 1px solid #d5d4d4;
    background: url(http://img823.imageshack.us/img823/31/contextmenudisabled.png) repeat-x;
}

.context-menu li a{
    line-height: 20px;
    height: 20px;
    text-decoration: none;
    color: black;
    display: block;
    cursor: default;
    padding-left: 30px;
    position: relative;
}

.context-menu a.delete{
    background: url(http://img268.imageshack.us/img268/9831/deleteqb.png) no-repeat 2px center;
}

.context-menu .vertical-separator{
    width: 2px;
    height: 100%;
    position: absolute;
    left: 25px;
    background: url(http://img836.imageshack.us/img836/6873/verticalseparator.png) repeat-y;
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;
}

.context-menu div.label{
    margin-left: 25px;
    padding-left: 5px;
    float:left;
}

HTML

<div class='context-menu-container'>
    <ul class='context-menu'>
        <div class='vertical-separator'></div>
        <li><a class='delete' href="#">Action</a></li>
        <li class='separator'></li>
        <li class='disabled'><a href="#">Action</a></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Action</a></li>
    </ul>
</div>

Answer 1

您需要这样做，这并不奇怪，因为有一个IE7错误：

.context-menu li.separator {
    font-size: 0;
    line-height: 0;
}

http://jsfiddle.net/thirtydot/XLRWT/17/

此外，将<div>作为<ul>的子级也是无效的。它可以在浏览器中工作，但它是still invalid。