在IE7中嵌入UL LI的CSS Bug

Question

我有一個內嵌菜單的問題，只在ie7出現錯誤。唯一一個菜單裏面有另一個菜單，與其他菜單不是內聯的，其餘的菜單似乎都被壓低了。

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函數來顯示dropdownmenu但它一點兒也不影響靜態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; 
}