IE7奇怪的间距，以ul为单位 [英] IE7 Weird spacing in ul

问题描述

所以，我做这个上下文菜单，看起来在所有主要的浏览器，甚至IE播放不错，直到IE7。

So, I'm making this context menus, which looks great in all major browsers, even IE plays nice, right down until IE7.

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

I don't know why it has that weird spacing and was hoping someone could enlighten me.

这里是一个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>

推荐答案

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

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

此外，有一个<$ c作为< ul> 的子级的$ c>< div> 是无效的HTML。它可能在浏览器中工作，但它仍然无效。

Also, having a <div> as a child of a <ul> is invalid HTML. It may work in browsers, but it's still invalid.

这篇关于IE7奇怪的间距，以ul为单位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！