html - IE7 ul 中的奇怪间距

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> 的 child 是无效的 HTML。它可能在浏览器中工作，但它是 still invalid .