IE7 中带有内联 ul li 的 CSS 错误

Question

我有一个内联菜单的小问题，错误只出现在 ie7 中。 唯一的菜单 li 在它下面有另一个菜单，与其余部分不内联，其余部分似乎被推下。

HTML

<div id="topnav">
<ul id="jsddm">
<li id="">
<a id="" href="/">Home</a>
</li>
<li id="">
<a href="/about.aspx">About</a>
<ul style="visibility: hidden;">
<li>
<a href="/about/board.aspx">Board</a>
</li>
<li>
<a href="/about/contact.aspx">Contact</a>
</li>
</ul>
</li>
<li>
<a href="/practices.aspx">Practices</a>
</li>
<li>
<a href="/how-we-work.aspx">How we work</a>
</li>
<li>
<a href="/patients.aspx">Patients</a>
</li>
<li>
<a href="/news-links.aspx">News &amp; Links</a>
</li>
<li>
<a href="/link.aspx">Link</a>
</li>
</ul>
</div>

CSS

    #jsddm
{   margin: 0;
    padding: 0;
    width: 100%;
}

#jsddm li
{   
    display: inline-block;
    list-style: none;
    font: 12px Tahoma, Arial;
    width: 100px;
    text-align: center;
}

*+html #jsddm li { display:inline }
* html #jsddm li { display:inline }

#jsddm ul li
{   
    display: block;
    font: 12px Tahoma, Arial;
}

#jsddm li ul
{   
    margin: 0 0 0 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 0px solid white;
    *margin: 0 0 0 -50px; /* IE 7 and below */
     /* margin: 0 0 0 -50px\9; IE 8 and below */
}

#jsddm ul li ul li
{           
    font: 12px Tahoma, Arial
}

#jsddm li a
{
    display: block;
    background: #009EE0;
    padding: 0;
    line-height: 28px;
    text-decoration: none;
    border-right: 0px solid white;
    width: 70px;
    color: #EAFFED;
    white-space: nowrap;
    font-weight: bold;
    width: 100%;
}

#jsddm li a:hover
{   background: #1A4473}

#jsddm li ul li
{   
    float: none;
    *margin: -2px 0 0 0;
    *padding:0;
}

+html #jsddm li ul li {  }

#jsddm li ul li a
{
    width: auto;
    background: #009EE0
    font-weight: bold;
}

#jsddm li ul li a:hover
{   background: #0E559C }

它使用 jquery 函数来显示下拉菜单，但它不会影响静态 html/css。

谢谢。

Answer 1

IE7 不支持inline-block 。 尝试浮动其中的元素 - http://jsfiddle.net/SsDnd/1/

#jsddm li
{   
    display: inline-block;
    list-style: none;
    font: 12px Tahoma, Arial;
    width: 100px;
    text-align: center;
    *float: left;
}