所以,我正在制作这个上下文菜单,它在所有主流浏览器中看起来都很棒,即使IE玩得很好,直到IE7。
我不知道为什么它有这种奇怪的间距,并希望有人能够启发我。
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>
答案 0 :(得分:1)
你需要这个,不出所料,因为有一个IE7错误:
.context-menu li.separator {
font-size: 0;
line-height: 0;
}
http://jsfiddle.net/thirtydot/XLRWT/17/
此外,将<div>
作为<ul>
的子项是无效的HTML。它可以在浏览器中使用,但它是still invalid。