我有一个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>
我实际上通过设置修复了它vertical-align: bottom到 LI 元素（是的，我没有删除空格和换行符:)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
