[英]CSS Bug with inline ul li in IE7
我有一個內聯菜單的小問題,錯誤只出現在 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 & 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。
謝謝。
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.